Question

我有一个列表，每个bock的构造如下。有些块有<span class="protected-icon"></span>。我想制作一个非常简单的greasemonkey插件来移除那个块。

所以，我的问题是使用Javascript如何删除/隐藏包含它的the entire block（<div data-item-type="user" class="js-stream-item stream-item"></div>？

<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

如果没有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/

更新如果要删除整个stream-item块，则必须循环使用它：

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/

如果您需要支持旧浏览器，请参阅Best way to find if an item is in a JavaScript array?。

Answer 2

要隐藏，您可以使用.hide()方法要删除，您可以使用.remove()方法。

现在定位你想要的块

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

将隐藏包含类stream-item的元素的所有div protected-icon的div 演示 http://jsfiddle.net/gaby/eeuQd/

<强>更新

以下是使用带有greasemonkey How can I use jQuery in Greasemonkey?

的jQuery的参考资料

我读到你试图在twitter页面上使用它。 Twitter正在使用Ajax请求加载页面的一部分（并加载新的推文.. ），因此您可能需要对脚本使用间隔，以便定期重新应用它。

这是因为您的代码可能在Twitter实际加载页面中的推文之前运行..

类似

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

Answer 3

使用jQuery的closest()和.remove()：

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

您也可以隐藏该元素供以后使用：

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

Answer 4

我对Greasemonkey不是很熟悉但是我注意到你把它标记为jQuery，所以我假设你可以使用jQuery脚本。

我会这样做以防你想在某个时候把它带回来：

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

Answer 5

使用jQuery很简单。在您的greasemonkey脚本的顶部区域添加以下内容：

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

然后使用以下jQuery：

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

更新：对不起，我有一个错字。父母应该是父母。

Answer 6

使用JQuery，你可以这样做来隐藏块：

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

或者删除它：

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

Answer 7

请参阅此处提出的问题，这是一个不同的问题，但包含答案： - ）

Remove element by id

编辑：假设您的意思是纯粹的javascript，如果您使用的是jQuery，请查看所有其他答案！

Answer 8

这应该有效：

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

这将找到具有protected-icon类的所有跨度，然后遍历DOM树，直到遇到具有user-content-rest的元素并删除该对象。

初学者：如何使用JavaScript删除包含特定类的节点

8 个答案: