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.