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)

Answer 3

Use jQuery's closest() and .remove():

$('protected-icon').closest('div[data-item-type="user"]').remove();

You could also hide the element for later use:

$('protected-icon').closest('div[data-item-type="user"]').hide();

Answer 4

I'm not very familiar with Greasemonkey but I noticed you tagged this as jQuery, so I'm assuming you would get use out of a jQuery script.

I would do this in case you want to bring it back at some point:

$('.protected-icon').parents('.js-stream-item.stream-item[data-item-type=user]').css({'display':'none'});

Answer 5

It is simple using jQuery. Add the following in the top area of your greasemonkey script:

// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Then use the following jQuery:

$('span.protected-icon').parents('.js-stream-item').hide();

Update: Sorry, I had a typo. parent should have been parents.

Answer 6

With JQuery you could do the this to hide the block:

 $(document).ready(function() {
    $('span.protected-icon').hide();
 });

Or to remove it:

$(document).ready(function() {
   $('span.protected-icon').remove();
});

Answer 7

See the question asked here, which is a different question but contains the answer :-)

Remove element by id

edit: assuming you mean pure javascript, if you are using jQuery see all the other answers!

Answer 8

This should work:

$('span.protected-icon').parents('.user-content-rest').remove();

That will find all the spans with the protected-icon class, then traverse the DOM tree until an element with the user-content-rest is encountered and remove that object.