3

有一个插件可以在页面上生成一些 div，当它们被查看时，它会使它们 display:none 但所有这些都堆积太多了。如何通过 Javascript 删除它们？

<div id="workarea">
<div id="message" class="messages" style="display: none;">Your message was saved</div>
<div id="message" class="messages" style="display: none;">Your message was saved</div>
<div id="message" class="messages" style="display: none;">Your message was saved</div>
<div id="message" class="messages" style="display: none;">Your message was saved</div>
</div>

现在我不能只做，$("workarea").innerHTML ="";因为那时我需要在工作区中做更多的事情，而且工作区中还有一些display:none我想要保留的元素（其他 div）。最好的方法是我可以抓住“消息”之类的类并让它找到所有display:none具有“消息”类的div，但是如何？

4

2 回答 2

4

只需遍历它们并检查style.display它是否是"none"：

// Reminder to lurkers: This is Prototype, not jQuery!
$("workarea").childElements().each(function(child) {
    if (child.style.display === "none") {
        $(child).remove();
    }
});

或者，如果您想将其限制为#workarea具有 class的子元素"messages"：

// Reminder to lurkers: This is Prototype, not jQuery!
$("workarea").childElements().each(function(child) {
    if (child.style.display === "none" && child.hasClassName("messages")) {
        child.remove();
    }
});

或者就此而言：

// Reminder to lurkers: This is Prototype, not jQuery!
$$("#workarea > .messages").each(function(child) {
    if (child.style.display === "none") {
        $(child).remove();
    }
});

旁注：您引用的 HTML 无效。id值在文档中必须div是唯一的，您不能有多个id "message". 不会改变上面的答案，但我想我应该提一下。如果这些是由插件生成的，我建议使用不同的插件。:-)

于 2013-05-10T13:58:21.080 回答
1

您可以找到所有id=message元素并遍历它们以查看它们的display样式是否设置为“无”：

var messageDivs = document.querySelectorAll('#workarea div[id="message"].messages');
for (var i = 0; i < messageDivs.length; i++) {
    var cur = messageDivs[i];
    if (cur.style.display === "none") {
        cur.parentNode.removeChild(cur);
    }
}

演示：http: //jsfiddle.net/d8kzV/

参考：

于 2013-05-10T13:59:37.893 回答