How to dynamically remove/delete elements via JavaScript

Posted on by


This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.

Demo
I am the parent div.

I am a child div within the parent div.

 


Here is the plain HTML code:

1
2
3
4
5
6
7
8

<div id="parent" style="border: 1px solid red; padding: 10px;">
     I am the parent div.
     <div id="child" style="border: 1px solid green; padding: 10px;">
           I am a child div within the parent div.
     </div>
</div>
<p>&nbsp;</p>
<input type="button" value="Remove Element" onClick="removeElement('parent','child');">

The important thing to note here is that the child div is within the parent div. Once the Remove Element button is clicked, the onClick event listener is triggered and launches the removeElement JavaScript function. This functions accepts two arguments:

  • parent – This is just the div id of the parent div.
  • child – This is the div id of the child div.

Here is the code for the removeElement JavaScript function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

The if block in lines 2-6 attempts to obtain the child element if it exists. This is just in case the user has already removed the child div and is reattempting to it. In this case, a JavaScript error would normally pop up because the child div does not exist.

If the child element does exist, the first thing that we do is obtain the child element in line 3 using the child div id. Next, we do the same thing with the parent element by using the parent div id Lastly, we invoke the removeChild method from the parent element and pass the child element as the argument. That’s it!

If the child div has already been removed, the else block in lines 7-10 gets executed. In this case, an alert would tell the user that the child div has already been removed and the function would return a false value.

Here is another demo of this JavaScript function where you can type in the name of the child element to be removed and just click on the Remove Element button OR you can just click the button that corresponds to each given child div to remove it.

Demo
My name is parentDiv. I cannot be removed.

My name is child1.
My name is child2.
My name is child3.

 

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

We are using the same JavaScript function as above. Here is the plain HTML for the demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="parentDiv" style="border: 1px solid red; padding: 10px;">
     My name is <b>parentDiv</b>.  I cannot be removed.
     <div id="child1" style="border: 1px solid green; padding: 10px; margin: 10px;">
          My name is <b>child1</b>.
     </div>
     <div id="child2" style="border: 1px solid blue; padding: 10px; margin: 10px;">
          My name is <b>child2</b>.
     </div>
     <div id="child3" style="border: 1px solid purple; padding: 10px; margin: 10px;">
          My name is <b>child3</b>.
     </div>
</div>
<p>&nbsp;</p>
Name of child element to be removed: <input id="nameOfChild" type="text" value="child2"><input type="button" value="Remove Element" onClick="var name=document.getElementById('nameOfChild').value; removeElement('parentDiv', name);">
<br><br>
For those who are lazy in typing in the actual names, we have these handy-dandy buttons:
<input type="button" value="Remove child1" onClick="removeElement('parentDiv', 'child1');">
<input type="button" value="Remove child2" onClick="removeElement('parentDiv', 'child2');">
<input type="button" value="Remove child3" onClick="removeElement('parentDiv', 'child3');">
<input type="button" value="Remove parentDiv" onClick="removeElement('parentDiv', 'parentDiv');">

Here is a demo that removes child elements from the parent using checkboxes that a user would select. This demo uses the same removeElement JavaScript function.

Demo
My name is parentDivElement. I cannot be removed.

My name is childOne.
My name is childTwo.
My name is childThree.

 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="parentDivElement" style="border: 1px solid red; padding: 10px;">
     My name is <b>parentDivElement</b>.  I cannot be removed.
     <div id="childOne" style="border: 1px solid green; padding: 10px; margin: 10px;">
          My name is <b>childOne</b>.
     </div>
     <div id="childTwo" style="border: 1px solid blue; padding: 10px; margin: 10px;">
          My name is <b>childTwo</b>.
     </div>
     <div id="childThree" style="border: 1px solid purple; padding: 10px; margin: 10px;">
          My name is <b>childThree</b>.
     </div>
</div>
<p>&nbsp;</p>
<input id="cb1" type="checkbox" value="childOne" onClick="removeElement('parentDivElement', this.value);"><label for="cb1">Remove <b>childOne</b></label>
<input id="cb2" type="checkbox" value="childTwo" onClick="removeElement('parentDivElement', this.value);"><label for="cb2">Remove <b>childTwo</b></label>
<input id="cb3" type="checkbox" value="childThree" onClick="removeElement('parentDivElement', this.value);"><label for="cb3">Remove <b>childThree</b></label>

The concept is the same as the previous demos where we attach the removeElement function to an event handler, which in this case is the onClick event handler of the checkbox. Once the checkbox is checked (or even unchecked), it fires off the onClick event handler and executes the removeElement JavaScript function and passes off the name of the parent div and the value of the checkbox.

If you are interested in hiding content via JavaScript and not necessarily deleting or removing them from the DOM, see my post on How to Hide and Show Your Div.

Update: Since my initial writing of this blog post, some great JavaScript libraries have been implemented which makes removing elements much easier! One of these JavaScript libraries is jQuery and I have done a similar post on removing elements from the DOM: How to dynamically remove elements from the DOM via jQuery.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!