There is a plug in that generates some divs on the page and when they are viewed it makes them display:none but all these pile up too much. How can I remove them via 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>

Now I cant just do $("workarea").innerHTML =""; because there are more things i need in the work area at that point, also there are elements (other divs) that have display:none in the work area that i will want to keep. The best way would be something where i can grab the class like "messages" and make it find all the divs with display:none that have class "message" but how?

There is a plug in that generates some divs on the page and when they are viewed it makes them display:none but all these pile up too much. How can I remove them via 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>

Now I cant just do $("workarea").innerHTML =""; because there are more things i need in the work area at that point, also there are elements (other divs) that have display:none in the work area that i will want to keep. The best way would be something where i can grab the class like "messages" and make it find all the divs with display:none that have class "message" but how?

• javascript
• html
• prototype

Share Improve this question Follow asked May 10, 2013 at 13:55 jedgardjedgard 86833 gold badges2323 silver badges4242 bronze badges 5

• loop through the elements and see if they are hidden, if they are remove them using removeChild. – epascarello Commented May 10, 2013 at 13:57
• 1 an id should be unique – KooiInc Commented May 10, 2013 at 13:58
• @KooiInc Did you read the question? A plugin generates these...it doesn't seem they have control over that – Ian Commented May 10, 2013 at 13:58
• If a plugin generates these, I would consider ditching the plugin. – KooiInc Commented May 10, 2013 at 14:01
• @KooiInc I agree, but that doesn't seem to be the concern – Ian Commented May 10, 2013 at 14:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Just loop through them and check style.display to see if it's "none":

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

Or if you want to restrict that to child elements of #workarea that have 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();
    }
});

Or for that matter:

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

---

Side note: The HTML you've quoted is invalid. id values must be unique in the document, you can't have more than one div with the id "message". Doesn't change the answer above, but I thought I should mention it. If those are being generated by a plug-in, I'd suggest using a different plug-in. :-)

You can find all the id=message elements and loop through them to see if their display style is set to "none":

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);
    }
}

DEMO: http://jsfiddle/d8kzV/

References:

• querySelectorAll: https://developer.mozilla/en-US/docs/DOM/Document.querySelectorAll
• removeChild: https://developer.mozilla/en-US/docs/DOM/Node.removeChild