All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Remove Element By Class

Last Updated : Mar 11, 2024

JavaScript Remove Element By Class

In this tutorial we will show you the solution of JavaScript remove element by class, here we removing element from parent node using removeChild() method by using children class name.

As we know removing child from parent node in javascript so here we are going to use same thing in th form of from div parent removing div child using for loop to iterate children nodes then removing it until meets it condition.

Step By Step Guide On JavaScript Remove Element By Class :-

Here we defined parent div element with class ‘row’ and defined two child div elements with class attribute ‘col’ then lastly we defined button ‘remove’ with onclick event for initialize function call ‘rem()’.

In script we defined function rem(), here we collecting children div elements by class ‘col’ and stored on variable ‘ele’.

Using while loop we iterating elements until elements ‘ele’ length meets value ‘1’ within loop we removing ‘col’ child from parent using ‘removeChild()’ method.

<!DOCTYPE html>
<html>
    <head>
        <title>Remove Element By Class</title>
    </head>
    <body>
        <div class="row">
            <div class="col">Col1</div>
            <div class="col">Col2</div>
        </div>
        <button onclick="rem()">Remove</button>
        <script>
            function rem(){
                const ele=document.getElementsByClassName("col");
                while(ele.length > 1){
                    ele[0].parentNode.removeChild(ele[0]);
                }
            }
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here we defined parent div ‘row’ with two child div ‘col’ elements with class attribute and a button defined with onclick event for load method rem() when user clicks it.
  7. In script we defined method rem(), here we declared variable for store child div elements ‘col’. Using while loop we can iterate all ‘col’ div elements one by one.
  8. Until condition meets when variable ‘ele’ length greater than ‘1’ so it will removing ‘col’ elements from parent ‘row’ element.
  9. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to remove elements by class name using javascript.

When we executes program on browser we can see two texts had in div elements ‘Col1,Col2’ with button ‘Remove’.

When user clicks on that button ‘Col1’ element removed by class ‘col’ and text ‘Col2’ only remain because we defined condition leaves last child if we defined like ‘greater than 0’ then result will be null.

I hope this tutorial on JavaScript remove element by class helps you and the steps and method mentioned above are easy to follow and implement.