Question

我知道这已经得到了广泛的回答，但是我以前的代码没有运气。

所以我想在用户点击按钮时删除这个div元素中的所有span元素。

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 Elements删除

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

尝试通过childNodes删除序列标签中有多少元素，但仍然没有。

有什么想法吗？

Answer 1

问题
你以一种不起作用的方式混合jQuery和vanilla javascript。

具体来说，您在这里获取了一个vanilla javascript中的元素：

var mySeq = document.getElementById（＆＃34; sequence-label＆＃34;）;

然后你试图使用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>

remove（expr）方法从DOM中删除所有匹配的元素。这不会将它们从jQuery对象中删除，允许您使用匹配的元素进一步。

JSFIDDLE LINK

Answer 3

我可能会忽略这一点，但要彻底清空这个可能有效的项目：

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

它将从“sequence-label”元素中清空所有子元素（实际上是所有元素）。

在Javascript中删除子元素

3 个答案: