Question

我有生成以下HTML的JavaScript

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

 </div>


</div>

现在我有一个按钮，按下时应该删除div类testbox。现在即使在这种情况下，testBox并不总是rightbox中的第一个孩子。

那我如何找到并删除它？然后测试它是否作为rightbox中的孩子出现？

Answer 1

使用querySelector()来查找您的元素，然后使用parentNode和removeChild()的组合来删除它。

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

Example Fiddle

编辑2018 ：

同时对remove()的支持已落在^{（在所有浏览器中，但IE）}，因此上述代码可以简化为以下内容：

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

请注意，您应该检查所选节点是否确实存在。其他两个片段都会引发错误。

Answer 2

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

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

Answer 3

var els = document.getElementsByTagName("div");
var el;
for(var i = 0, ceiling = els.length; i < ceiling; i++) {
    el = els[i];
    if(el.className == "testbox") {
        el.parentNode.removeChild(el);
        break;
    }
}

var presentAsChildWithinRightbox = false;
for(var i = 0, ceiling = els.length; i < ceiling; i++) {
    el = els[i];
    if(el.className == "rightbox") {
        var childNodes = el.childNodes;
        for(var j = 0, ceiling2 = childNodes.length; j < ceiling2; j++) {
            if(childNodes[j].className == "testbox") {
                presentAsChildWithinRightbox = true;
                j = ceiling2;
                i = ceiling;
            }
        }
    }
}
if(presentAsChildWithinRightbox)
    alert("A div with classname childbox has a child div with classname testbox");
else
    alert("A div with classname childbox does not have a child div with classname testbox");

Answer 4

试试这个

$(".rightBox").find("div").eq(0).remove();
$(".rightBox").find("div.testBox").remove();

注意：这是使用jQuery实现的

使用纯JavaScript查找和删除特定元素

4 个答案: