Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - how to remove all child elements / nodes from DOM node?

0 contributions
9 points

Quick solution:

// 1. faster
var element = document.querySelector('#element');
while(element.lastChild) {
     element.removeChild(element.lastChild);
}

// 2. slower
var element = document.querySelector('#element');
element.innerHTML = '';

// 3. with jQuery
$('#element').empty();

DOM is composed with nodes that have different types. Element is one kind of node type that is able to contain different nodes inside. It is important to split problem of removing content for nodes removing and elements removing. More often it is necessary to remove all nodes. In this post different ways how to remove content starting from nodes removing are described (1-7 points).

1. removeChild() method examples

To use this approach it is necessary to have parent element that can be taken with parentNode property. To remove element removeChild() or remove() methods are useful. Second one is not supported by older browsers.

1.1. lastChild property

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function emptyElement(element) {
        var child = element.lastChild;

        while(child) {
            element.removeChild(child); // or just: child.remove()
          	child = element.lastChild;
        }
    }

    var element = document.querySelector('#element');

    function onClick() {
        emptyElement(element);
    }

  </script>
</body>
</html>

1.2. firstNode propert

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function emptyElement(element) {
        var child = element.firstChild;

        while(child) {
            element.removeChild(child); // or just: child.remove()
          	child = element.firstChild;
        }
    }

    var element = document.querySelector('#element');

    function onClick() {
        emptyElement(element);
    }

  </script>
</body>
</html>

1.3. childNodes property

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function emptyElement(element) {
        var children = element.childNodes;

        while(children.length > 0) {
            var child = children[children.length - 1]; // children[0];
            element.removeChild(child); // or just: child.remove()
        }
    }

    var element = document.querySelector('#element');

    function onClick() {
        emptyElement(element);
    }

  </script>
</body>
</html>

3. innerHTML property example

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    var element = document.querySelector('#element');

    function onClick() {
        element.innerHTML = '';
    }

  </script>
</body>
</html>

4. innerText property example

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    var element = document.querySelector('#element');

    function onClick() {
        element.innerText = '';
    }

  </script>
</body>
</html>

5. textContent propert example

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    var element = document.querySelector('#element');

    function onClick() {
        element.textContent = '';
    }

  </script>
</body>
</html>

6. jQuery examples

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function onClick() {
        var element = $('#element'); // this method should be executed when DOM is ready
        
        element.empty(); // or element.html('') or element.text('');
    }

  </script>
</body>
</html>

7. Deleting selected range example

This approach removes all nodes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function emptyElement(element) {
        var range = new Range();

        range.selectNodeContents(element);
        range.deleteContents();
    }

    var element = document.querySelector('#element');

    function onClick() {
        emptyElement(element);
    }

  </script>
</body>
</html>

8. children property example

Importan note: this approach removes only elements placed directly in the div#element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
  <button onclick="onClick()">Remove lines!</button>
  <script>

    function removeElements(element) {
        var children = element.children;

        while(children.length > 0) {
            var child = children[children.length - 1]; // children[0];
            element.removeChild(child); // or just: child.remove()
        }
    }

    var element = document.querySelector('#element');

    function onClick() {
        removeElements(element);

        // this line shows the element is not empty still
        console.log(element.outerHTML);
    }

  </script>
</body>
</html>

Hints

It is possible to check if element is empty with hasChildNodes() method.

Merged quastions

  1. JavaScript - how to empty DOM node?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more