Code Result

How can I remove all child elements of a DOM node in JavaScript?

Suppose you are building a web app that manages the data of daily tasks, the user inserts the task and a list of tasks gets formed. But at some point in time, the user wants to remove all the tasks from the list and wants to make the list empty. So, as a developer, you should know how to remove all the child elements from the DOM node.

To remove all the elements from the DOM node we have the following approaches.

• By iterating the DOM nodes and using the removeChild method.
• By Erasing the innerHTML value to a blank string.
• By using jQuery’s empty() method.
• Using the replaceChildren() method.

By iterating the DOM nodes and using the removeChild Method

In this method, we will iterate the DOM using the while loop or for loop. At every iteration, we will check if there is an element remaining in the node using the nodeObject.hasChildNodes() method or nodeObject.childElementCount property, If there is any element present in the node we simple remove that using the nodeObject.removeChild() Method and pass the first node as an argument.

Syntax

parentElement.hasChildNodes() parentElement.removeChild(parentElement.firstChild)

Here the parentElement.hasChildNodes() will check if there is any element present in the DOM node or not. The parentElement.removeChild(parentElement.firstChild) remove the first child of the DOM node.

Algorithm

• STEP 1 − Iterate over all the DOM nodes. To iterate all the nodes, you could use any loop such as for or while loop.
• STEP 2 − At every iteration we checked if there is any child present in the parent or not.
• STEP 3 − If there is any child we remove it using the removeChild( ) method.

Example 1

Removing all child elements using reomveChild() method

In the example below, we remove all child elements of a DOM node using removeChild() method. We use while loop to iterate all child nodes. First we check if the child element exists using hasChildNodes() method.

     
Removing All Child Elements using removeChild() Method
 
Click "Remove Child" to remove all child button elements.
 Remove Child 

 
 
First Second Third Fourth 
    

Example 2

Removing all child elements using nodeObject.remove() method

In the example below, we remove all child elements of a DOM node using nodeObject.remove()method. We use while loop to iterate all child nodes. First we check if the child element exists using hasChildNodes() method.

   
Removing All Child Elements using remove() Method
 
Click "Remove Child" to remove all child button elements. 
Remove Child 

 
 
First Second Third Fourth 
    

By erasing the innerHTML value:

In this method, we assign a blank string or null to object.innerHTML . Although this approach seems easy, there are some disadvantages too. The first one is, that if there is SVG inside the parent it won’t remove that. The second is, that it is considered very slow because when you assign a null or empty string to innerHTML, the DOM gets removed from the surface but the browser persists the child elements which makes the overall performance slow.

Syntax

parent.innerHTML = null or parent.innerHTML = ""

Here the parent is the parent DOM node from which we want to remove the child elements.

Example

  
Removing All Child Elements by assigning parent.innerHTML value to null
 
Click "Remove Child" to remove all child button elements. 
Remove Child 

 
 
First Second Third Fourth 
    

By using the jQuery’s empty() Method

The empty() method of jQuery removes all child nodes from a set of matched elements. We select out parent DOM element using and apply the empty() method on it.

Syntax

Example

  
Removing All Child Elements using jQuery’s empty() Method
 
Click "Remove Child" to remove all child button elements. 
Remove Child 

 
 
First Second Third Fourth 
     

By using the replaceChildren() Method

The replaceChildren() method is used to replace the old elements of the DOM node with a newer set of elements. This method takes the node elements as arguments and replaces the DOM elements with the same order as arguments. If you do not enter any argument then it simply replaces the old elements with null, which means the old element gets removed.

Syntax

parentElement.replaceElement();

Here the parentElement is the DOM node from which we want to remove chid elements.

Example

  
Removing All Child Elements using replaceElement() Method
 
Click "Remove Child" to remove all child button elements. 
Remove Child 

 
 
First Second Third Fourth 
    

We have discussed four methods to remove all child elements of a DOM node in JavaScript. You can use any of them for your convenience. We recommend you to use the first method or the fourth method. If you are using jQuery then use the third method, we won’t recommend you to use the second method if you are building a complex UI because it makes the web pages slower.

Источник

Remove All Child Nodes

Summary: in this tutorial, you will learn how to remove all child nodes of a node using the JavaScript DOM methods.

To remove all child nodes of a node, you use the following steps:

• First, select the first child node ( firstChild ) and remove it using the removeChild() method. Once the first child node is removed, the next child node will automatically become the first child node.
• Second, repeat the first steps until there is no remaining child node.

The following removeAllChildNodes() function removes all the child nodes of a node:

function removeAllChildNodes(parent) < while (parent.firstChild) < parent.removeChild(parent.firstChild); > >Code language: PHP (php)

Suppose that you have the following HTML document:

html lang="en"> head> title>Remove All Child Nodes title> head> body> div id="container"> p>The first paragraph. p> p>The second paragraph. p> p>The third paragraph. p> div> body> html>Code language: HTML, XML (xml)

The following script will remove all child nodes of the with the id container :

function removeAllChildNodes(parent) < while (parent.firstChild) < parent.removeChild(parent.firstChild); > > const container = document.querySelector('#container'); removeAllChildNodes(container);Code language: PHP (php)

Caution: innerHTML

The following code also removes all child nodes of a node:

parent.innerHTML = '';Code language: PHP (php)

However, it is not recommended because it doesn’t remove the event handlers of the child nodes, which might cause a memory leak.

Источник

How to remove all children of an element using JavaScript

To remove all child nodes of an element, you can use the element’s removeChild() method along with the lastChild property.

The removeChild() method removes the given node from the specified element. It returns the removed node as a Node object, or null if the node is no longer available.

Here is an example code snippet:

const removeChilds = (parent) =>  while (parent.lastChild)  parent.removeChild(parent.lastChild); > >; // select target target const body = document.querySelector('body'); // remove all child nodes removeChilds(body); 

The removeChilds() method does the following:

1. Select the last child node by using the lastChild property, and removes it by using the removeChild() method. Once the last child node is removed, the second last node automatically becomes the last child node.
2. Repeat the first step until there is no child node left.

The removed child node returned by the removeChild() method is no longer part of DOM. However, you can insert it back to the DOM if required.

// select target target const body = document.querySelector('body'); // remove all child nodes body.innerHTML = ''; 

This approach is simple, but it may not be a suitable choice for high-performance applications because it invokes the browser’s HTML parser to parse the new string and update the DOM. If you don’t want to invoke HTML parser, use the textContent property instead:

According to MDN, the textContent property performs better than innerHTML as the browser doesn’t have to invoke the HTML parser and can immediately replace all child nodes of the element with a single text node. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

Node: childNodes property

The read-only childNodes property of the Node interface returns a live NodeList of child nodes of the given element where the first child node is assigned index 0 . Child nodes include elements, text and comments.

Note: The NodeList being live means that its content is changed each time new children are added or removed.

The items in the collection of nodes are objects, not strings. To get data from node objects, use their properties. For example, to get the name of the first childNode, you can use elementNodeReference.childNodes[0].nodeName .

The document object itself has two children: the Doctype declaration and the root element, typically referred to as documentElement . In HTML documents the latter is the element.

It is important to keep in mind that childNodes includes all child nodes, including non-element nodes like text and comment. To get a collection containing only elements, use Element.children instead.

Value

A live NodeList containing the children of the node.

Note: Several calls to childNodes return the same NodeList .

Examples

Simple usage

// Note that parg is an object reference to a 
element // First check that the element has child nodes if (parg.hasChildNodes())  let children = parg.childNodes; for (const node of children)  // Do something with each child as children[i] // NOTE: List is live! Adding or removing children will change the list's `length` > > 

Remove all children from a node

// This is one way to remove all children from a node // box is an object reference to an element while (box.firstChild)  // The list is LIVE so it will re-index each call box.removeChild(box.firstChild); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник