Beginner : How to remove a node that contains a specific class using JavaScript

Question

I have a list that every bock is constructed like below. Some of the blocks have a <span class="protected-icon"></span>.
I would like to make a really simple greasemonkey plugin that removes that block.

So, my question is using Javascript how can I remove/hide the entire block ( <div data-item-type="user" class="js-stream-item stream-item"></div>that contains it?

<div data-item-type="user" class="js-stream-item stream-item">
<div class="user-content-rest">
    <span class="user-name">
         <span class="protected-icon"></span>
      </span>
</div>
</div>

Answer 1

How to do it without jQuery:

var p = document.getElementsByClassName('protected-icon');
for (var i=p.length; --i>=0;) {
    p[i].parentNode.removeChild(p[i]);
}

http://jsfiddle.net/sRs4s/1/

UPDATE If you want to remove the entire stream-item block, you have to loop up to it:

var p = document.getElementsByClassName('protected-icon');
var cstr = "stream-item";
for (var i=p.length; --i>=0;) {
    var n = p[i];
    while(n.className.split(" ").indexOf(cstr)==-1) { // won't work in older browsers
        n = n.parentNode;
    }
    n.parentNode.removeChild(n);
}

http://jsfiddle.net/sRs4s/3/

See Best way to find if an item is in a JavaScript array? if you need to support older browsers.

Answer 2

To hide you can use the .hide() method.
To remove you can use the .remove() method.

Now to target the block you want

// change hide to remove for complete removal from the DOM.
$('.stream-item:has(.protected-icon)').hide(); 

will hide all the divs with class stream-item that contain an element with class protected-icon
Demo at http://jsfiddle.net/gaby/eeuQd/

---

Update

Here is a reference on using jQuery with greasemonkey How can I use jQuery in Greasemonkey?

I read that you are trying to use this with twitter page. Twitter is using Ajax requests to load parts of the page (and load new tweets..) so you might need to use an interval to your script that that it gets re-applied periodically..

That is because your code might run before the twitter has actually loaded the tweets in the page..

something like

setInterval(function(){
    $('.stream-item:has(.protected-icon)').hide();
}, 2000 ); // 2000 means every two seconds (in milliseconds)