How to dynamically remove/delete elements via JavaScript

Knix — Thu, 27 Mar 2008 05:57:53 +0000

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:

I am the parent div.

I am a child div within the parent div.

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:

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:

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:

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.

Remove childOne

Remove childTwo

Remove childThree

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne Remove childTwo Remove childThree

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.

Random Snippets » remove

How to dynamically remove/delete elements via JavaScript