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

Question

我有生成以下 HTML 的 javascript

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

 </div>


</div>

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

那么如何找到并删除它呢？然后测试它是否作为孩子出现在rightbox?

Answer 1

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

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

示例小提琴

---

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 实现的