To remove and add new HTML tags, use the concept of hide() and show().Let’s say the following are our buttons −Click Me To hide above content Click Me To show above content To remove and add tags on button clicks, use hie() and show() −$(document).ready(function(){    $("#hide").click(function(){       $("h1").hide();    });    $("#show").click(function(){       $("h1").show();    }); });Example Live Demo Document Test JavaScript Click Me To hide above content Click Me To show above content    $(document).ready(function(){       $("#hide").click(function(){       ... Read More

Let’s say the following are our values −let subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java'];To count the non-empty and non-null values, use the forEach(). The syntax is as follows −yourArrayName.forEach(anyVariableName =>{    yourStatement1    .    .    .    N    } } )Now, use the if statement and check −var count=0 subjectNames.forEach(subject =>{    if(subject!=' ' || subject!=null){       count+=1;       }    } )Examplelet subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java']; var count=0 subjectNames.forEach(subject =>{    if(subject!=' ' || subject!=null){          count+=1;       }    } ) console.log("Number of subject=="+count);To ... Read More

Let’s say, we have the following objects in JavaScript −ObjectValue =[    { "id": "101", "details": { Name:"John", subjectName:"JavaScript" }},    { "id": "102", "details": { Name:"David", subjectName:"MongoDB" }},    { "id": "103" } ]To remove an object using filter(), the code is as follows −ExampleObjectValue =[    { "id": "101", "details": { Name:"John", subjectName:"JavaScript" }},    { "id": "102", "details": { Name:"David", subjectName:"MongoDB" }},    { "id": "103" } ] output=ObjectValue.filter(obj=>obj.details) console.log(output)To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo46.js.OutputThis will produce the following output −PS C:\Users\Amit\JavaScript-code> node demo46.js ... Read More

For empty iframe src, use the element and set it like the following for an empty src −Example Live Demo Document To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −

To transform object of objects to object of array of objects, use the concept of Object.fromEntries() along with map().Exampleconst studentDetails = {    'details1': {Name: "John", CountryName: "US"},    'details2': {Name: "David", CountryName: "AUS"},    'details3': {Name: "Bob", CountryName: "UK"}, }; console.log(    Object.fromEntries(Object.entries(studentDetails).map(([key,    value]) => [key, [value]])) );To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo45.js.OutputThis will produce the following output −PS C:\Users\Amit\JavaScript-code> node demo45.js {    details1: [ { Name: 'John', CountryName: 'US' } ],    details2: [ { Name: 'David', CountryName: 'AUS' } ],    details3: ... Read More

This may happen if you haven’t used “export” statement. Use “export” before the function which will be imported into the script file. The JavaScript file is as follows which has the file name demo.js.demo.jsconsole.log("function will import"); export function test(){    console.log("Imported!!!"); }Here is the “index.html” file that imports the above function −index.htmlExample Live Demo Document    import { test } from "./demo.js"    test(); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS ... Read More

Let’s say the following is our input text −StudentName:To lose input hints on pressing mouse cursor, use onFocus and onBlur concept.Example Live Demo Document StudentName:    function guessFocus() {       if (this.value == this.defaultValue)          this.value = '';    }    function guessBlur(event) {       if (this.value == '')       this.value = this.defaultValue;    }    var event = document.getElementById('studentName');    event.onfocus = guessFocus;    event.onblur = guessBlur; To run the above program, save the file name “anyName.html(index.html)” and ... Read More

You can use classList.add() along with append(). Use the document.createElement() to create a new div and the classList.add() would add the CSS class.(.class selector).Example Live Demo Document    .add-all-subject {       display: grid;       height: 100px;       width: 100px;       grid-template-columns: 2fr 2fr 2fr 2fr 2fr;       grid-template-rows: 2fr;       grid-column-gap: 5.9rem;       grid-row-gap: 2rem;       color: red;       border: 2px solid red;    } Add Subjects    const addSubjectArea = document.getElementById("add-subject"); ... Read More

At first, you need to split() the string on the basis of space and extract the first character using charAt(). Use toUpperCase() for the extracted character.Examplefunction capitalizeTheFirstLetterOfEachWord(words) {    var separateWord = words.toLowerCase().split(' ');    for (var i = 0; i < separateWord.length; i++) {       separateWord[i] = separateWord[i].charAt(0).toUpperCase() +       separateWord[i].substring(1);    }    return separateWord.join(' '); } console.log(capitalizeTheFirstLetterOfEachWord("my name is john"));To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo43.js.OutputThis will produce the following output with first letter capitalize −PS C:\Users\Amit\JavaScript-code> node demo43.js My Name ... Read More

To hide a div in JavaScript on button click we will be discussing three different approaches with example codes. We will hide the div upon clicking the button and similarly display the hidden div upon clicking the button. In this article we are having a div element. Our task is to hide the div on clicking the button using JavaScript. Approaches to Hide div on Button Click Here is a list of approaches to hide a div in JavaScript on button click which we will be discussing in this article with stepwise explanation and complete example codes. ... Read More