CODEWITHSUNDEEP
javascripthtml
Prasoon
Prasoon

Reputation: 455

What is the difference between 'remove' and 'removeChild' method in JavaScript?

I have created an HTML page to understand how removing an element works.

Code:

<html>
  <head>
    <script>
      var childDiv = null;
      var parent1 = null;
      var parent2 = null;
      function init() {
        childDiv = document.getElementById("child");
        parent1 = document.getElementById("parent1");
        parent2 = document.getElementById("parent2");
      }

      function rem() {
        if (childDiv) {
          childDiv.remove();
          alert("child removed");
        } else {
          alert("child does not exist");
        }
      }

      function remChild() {
        if (childDiv){
          if (parent1.children.length > 0) {
            parent1.removeChild(childDiv);
            alert("child unbound from parent");
          } else {
            alert("child exists but is not bound to parent");
          }
        } else {
          alert("child does not exist");

        }
      }

      function ins() {
        if (childDiv) {
          parent2.appendChild(childDiv);

          alert("child inserted to another parent");
        }
      }
    </script>
  </head>
  <body onload="init()">
    <div id="parent1">
      <div id="child"></div>
    </div>
    <div id="parent2"></div>
    <button onclick="rem()">remove</button>
    <button onclick="remChild()">removeChild</button>
    <button onclick="ins()">insert</button>
  </body>
</html>

Here I try to remove the 'child' div in two ways:

  1. By calling 'remove' method on 'child' div

  2. By calling 'removeChild' method on 'parent1' node

But in both the cases, the node is not actually removed. I can always insert 'child' div to 'parent2'.

I can understand that in second case, the 'child' is unbound from 'parent1' and not actually deleted. But in first case, is the 'child' not removed permanently?

Shouldn't I get an error while trying to insert an element which does not exist?

Please explain.

And if the element does exist even after calling 'remove' on element:

  1. How is 'remove' different from 'removeChild'? As I see, both these methods just unbound child from parent, but element still occupies the memory.

  2. Is there any way to ensure that element is actually removed from memory?

Upvotes: 22

Views: 16475

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

remove is a new function. It's a shortcut, making it simpler to remove an element without having to look for the parent node. It's unfortunately not available on old versions of Internet Explorer so, unless you don't want to support this browser, you'll have to use removeChild or use a polyfill.

The reason the child element is kept in memory is your code keeps a reference to it.

If you do 

childDiv = null;

then there's no reference pointing to it and the browser can free the memory.

Upvotes: 13

Oriol
Oriol

Reputation: 288480

the node is not actually removed

The confusion might be because you might think removing an element means something like killing or destroying it.

enter image description here

But in fact, the concept of removal basically means breaking the relationship between a child and its parent. It's just a detachment.

enter image description here

Shouldn't I get an error while trying to insert an element which does not exist?

No, because it still exists.

How is remove different from removeChild?

remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical.

Is there any way to ensure that element is actually removed from memory?

No. You can only unreference it and hope that there is a garbage collector which will detect the object is not referenced and then will remove it.

Upvotes: 42

Related Questions