Remove Element JavaScript

With JavaScript, We can easily remove different HTML elements.

Also Read: Create Element JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - javascript remove element</title>
</head>
<body>
    <div id="container">
        <ul>
            <li>Nachiket</li>
            <li>Monil</li>
            <li>Yash</li>
        </ul>
    </div>
</body>
</html>

Example 1

Suppose we want to remove <li> element inside <ul> elements using javascript.

Here, we remove <li> elements using javascript as follows:

<script>
    var selectdiv = document.getElementById("container");
    var selectul = selectdiv.getElementsByTagName("ul")[0];
    var selectli = selectul.getElementsByTagName("li")[0];
    selectul.removeChild(selectli);
</script>

Explanation:

  • We select <div> tag using id container.
  • We select <ul> tag using getElementsByTagName() function.
  • We select <li> tag using getElementsByTagName() function.
  • We remove first <li> element inside the <ul> tag.
<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - javascript remove element</title>
</head>
<body>
    <div id="container">
        <ul>
            <li>Nachiket</li>
            <li>Monil</li>
            <li>Yash</li>
        </ul>
    </div>
    <script>
        var selectdiv = document.getElementById("container");
        var selectul = selectdiv.getElementsByTagName("ul")[0];
        var selectli = selectul.getElementsByTagName("li")[0];
        selectul.removeChild(selectli);
    </script>
</body>
</html>

Note: We can insert javascript anywhere inside head or body tag. It is suitable to add javascript at the end of the body tag.

Above code remove only first <li> tag using javascript.
We can remove any <li> element by using its index number.

Syntax:

var selectli = selectul.getElementsByTagName("li")[i]; 

Explanation:

As explained above we can change different <li> element by setting index no [i].

Example 2:

We can also remove all <li> elements using javascript. Here, we remove all <li> elements using javascript as follows:

<script>
    var selectdiv = document.getElementById("container");
    var selectul = selectdiv.getElementsByTagName("ul")[0];
    var len = selectul.getElementsByTagName("li").length;
     for(var i=0;i<len;i++){
         var selectli = selectul.getElementsByTagName("li")[0];
         selectul.removeChild(selectli);
     }
</script>

Explanation:

  • We select <div> tag using id container.
  • We select <ul> tag using getElementsByTagName() function.
  • We find number of <li> tags using length function.
  • We use for loop for removing all elements inside <ul> tag.
  • We select <li> tag using getElementsByTagName() function.
  • We remove first <li> element inside the <ul> tag and this process continues till the loop ends.
<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - javascript create element</title>
</head>
<body>
    <div>
        <div id="container">
        <ul>
            <li>Nachiket</li> 
            <li>Yash</li>
            <li>Monil</li>
        </ul>
    </div>
    </div>
        <script>
        var selectdiv = document.getElementById("container");
        var selectul = selectdiv.getElementsByTagName("ul")[0];
        var len = selectul.getElementsByTagName("li").length;
         for(var i=0;i<len;i++){
             var selectli = selectul.getElementsByTagName("li")[0];
             selectul.removeChild(selectli);
         }
    </script>
</body>
</html> 

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
Create Element JavaScript
Create Element JavaScript

With Javascript, We can easily create different HTML elements and also append them to other elements. Read Also: Remove Element...

Close