Удаление дочерних элементов в Javascript

Question

Я знаю, что это было подробно отреагировано, но, увы, мне не повезло с предыдущим кодом.

Так что я хочу удалить все элементы span в этом элементе div, когда пользователь называет кнопку.

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> 

** JS **

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

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

} 

Вещи, которые я попробовал

Пробовал удалить все элементы как дети последовательности метки

mySeq.empty(); 

Пробовал удалить классом выбранного

mySeq.remove(".spanUnselected"); 

Пробовал удалить с помощью FirstChild элементов

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

пытался удалить с помощью ChildNodes также о том, сколько элементов в последовательности-метки и до сих пор ничего.

Любые идеи?

Answer 1

Проблема
Вы смешивания JQuery и ваниль Javascript таким образом, что не работает.

В частности, вы получаете элемент в ванили Javascript здесь:

вар mySeq = документ.getElementById ("последовательность-метка");

Затем вы пытаетесь удалить элементы с помощью JQuery:

mySeq.empty(); 

и

mySeq.remove(".spanUnselected"); 

Решение
Решение достаточно простое. Получить элемент в качестве объекта JQuery первого, то ваши функции будут работать:

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

Кроме того, убедитесь, что ваши привязки событий происходят внутри документа: готового

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

Answer 2

Попробуйте этот код:

$('#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> 

Метод удаления (выражение) удаляет все совпавшие элементы из DOM. Это НЕ удаляет их из объекта jQuery, что позволяет использовать соответствующие элементы.

JSFIDDLE LINK

Answer 3

я, возможно, отсутствует пункт, но полностью пустой элемент это может работать:

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

Он будет сливать все дети (фактически все) внутри «последовательности -label ".