Removing Child Elements in Javascript

Question

I know this has been extensively answered but alas I have had no luck with previous code.

So I want to remove all the span elements in this div element when the user onclicks a button.

THE HTML

<div id="sequence-label" class="scrollingDiv" style="visibility: hidden;">
<li>H :</li>
<span class="spanUnselected">T</span>
<span class="spanUnselected">F</span>
<span class="spanUnselected">G</span>
<span class="spanUnselected">Q</span>
<span class="spanUnselected">G</span>
</div>

**THE JS **

$('#sequence-remove-pdb').click(sequenceRemovePdb);

function sequenceRemovePdb() {
    document.getElementById("sequence-label").style.visibility = "hidden";
    workspaceSideChain();
    var mySeq = document.getElementById("sequence-label");

}

Things I have tried

Tried to remove all the elements as children of sequence-label

mySeq.empty();

Tried to remove by class selected

mySeq.remove(".spanUnselected");

Tried to remove by firstChild Elements

  while (mySeq.firstChild) {
        mySeq.removeChild(mySeq.firstChild);
}

Tried to remove by childNodes also over how many elements are in sequence-label and still nothing.

Any ideas?

are you sure that `#sequence-remove-pdb` exists in the DOM when you attempt to bind the callback? Please include a [mcve]. — zzzzBov, Aug 17 '16 at 20:42
[Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/1529630) seems a probable duplicate. — Oriol, Aug 17 '16 at 20:45

score 3 · Accepted Answer · answered Aug 17 '16 at 20:43

3

The Problem
You're mixing jQuery and vanilla javascript in a way that does not work.

Specifically, you're getting an element in vanilla javascript here:

var mySeq = document.getElementById("sequence-label");

Then you are trying to remove elements using jQuery:

mySeq.empty();

and

mySeq.remove(".spanUnselected");

The Solution
The solution is simple enough. Get the element as a jQuery object first, then your functions will work:

var mySeq = jQuery("#sequence-label");
// Then act on it with jQuery as you see fit.
mySeq.find('.spanUnselected').remove();

Also, be sure your event bindings take place inside of a document ready:

jQuery(function($) {
    $('#sequence-remove-pdb').click(function() {sequenceRemovePdb;});
});

answered Aug 17 '16 at 20:43

random_user_name

23,924
7
69
103

But the question mentions `while (mySeq.firstChild) { mySeq.removeChild(mySeq.firstChild); }`, and that should have worked. – Oriol Aug 17 '16 at 20:45
@Oriol - true, I think there's a few problems, so I edited to ensure the event bindings are happening when the element exists – random_user_name Aug 17 '16 at 20:45
that did work. The event bindings were working, but yeah I understand that now. Thank you, I was really confused as to why previous answers weren't working. – Suliman Sharif Aug 17 '16 at 20:48

Nihar Sarkar · Answer 2 · 2016-08-17T20:53:31.547

0

Try this code :

$('#sequence-remove-pdb').click(function(){
   $('span.spanUnselected').remove();
});

HTML :

<div id="sequence-label" class="scrollingDiv">
<li>H :</li>
<span class="spanUnselected">T</span>
<span class="spanUnselected">F</span>
<span class="spanUnselected">G</span>
<span class="spanUnselected">Q</span>
<span class="spanUnselected">G</span>
</div>

The remove( expr ) method removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further.

JSFIDDLE LINK

edited Aug 17 '16 at 20:53

answered Aug 17 '16 at 20:37

Nihar Sarkar

1,019
1
12
24

Nope, still doesn't remove any child elements. – Suliman Sharif Aug 17 '16 at 20:39

score 0 · Answer 3 · answered Aug 17 '16 at 20:38

0

I might be missing the point but to completely empty the item this might work:

document.getElementById("sequence-label").innerHTML = "";

It will empty out all the children (actually everything) from inside the "sequence-label" element.

answered Aug 17 '16 at 20:38

David

3,171
2
22
25

Ya nothing, the span elements still remain. – Suliman Sharif Aug 17 '16 at 20:42
if you are using view source in your browser they will still be there as view source usually shows how the code was received. If you want to see the modified dom then you need to use the browsers developer tools. – David Aug 17 '16 at 20:44
Ya I'm using the chrome browser and seeing the source code update correctly. Made sure to check that before. – Suliman Sharif Aug 17 '16 at 20:49

Removing Child Elements in Javascript

3 Answers3