Find and remove specific element using pure javascript [closed]

Question

I have javascript that generates the following HTML

<div class='rightbox'>
 <div class'testBox'>

 </div>


</div>

Now i have a button that when pressed should remove the div whos class is testbox. Now even though it is in this case it is not always that the testBox is the first child within the rightbox.

So how do i find and remove it? and then afterwards test if it is present as a child within the rightbox?

Answer 1

Use, e.g., querySelector() to find your element and then a combination of parentNode and removeChild() to delete it.

var el = document.querySelector( '.testBox' );
el.parentNode.removeChild( el );

Example Fiddle

---

Edit 2018:

In the meanwhile support for remove() has landed ^{(In all browsers, but IE)}, so the above code can be reduced to the following:

document.querySelector( '.testBox' ).remove();

Note, that you should check, whether the selected node actually exists. Otherwiese both snippets will throw an error.

Answer 2

var testBoxes = Array.prototype.slice.call(document.querySelectorAll('.testBox'));

testBoxes.forEach(function(testBox) {
    testBox.parentNode.removeChild(testBox);
});