javascript - 如何从父节点中删除特定标签？

Question

编码

<div class="something>
    <input type="text onchange="some_function(this)">
    <span>Blqh blqh</span>
    <span>Blq blq</span>
</div>

一旦输入发生变化，我想some_function(this)删除所有<span>标签。到目前为止，我拥有的功能：

function some_function(x_this) {
   var parent=x_this.parentNode;
}

我如何获取所有<span>元素并删除它们？

非常感谢

Answer 1

例如，使用以下HTML

<div id="foo">
    <input />
    <span>Blqh blqh</span>
    <span>Blq blq</span>
    <br />
</div>

你可以运行这个JavaScript

var parent = document.getElementById('foo'), i = parent.childNodes.length;
while (i--) 
    if (parent.childNodes[i].tagName === 'SPAN')
        parent.removeChild(parent.childNodes[i]);

Answer 2

function some_function(x_this) {
   var parent=x_this.parentNode,
       spans = parent.getElementsByTagName('span');

   for (var i = 0; i < spans.length; i++){
      parent.removeChild(spans[i]);
   }
}

Answer 3

如果您使用的是jquery，则将 id 添加到您的 Div 标签，然后

<div id="mydiv">
    <input />
    <span>Blqh blqh</span>
    <span>Blq blq</span>
    <br />
</div>

使用这个 jquery 代码：

$('#mydiv').find('span').remove()

Answer 4

$('#parent').find('span').remove();

或者使用纯js

var childrenspan = document.getElementById('id').getElementsByTagName('span');

for(var i=0;i<childrenspan.length;i++)
{
   childrenspan[i].parentNode.removeChild(childrenspan[i]);
}