我试图调整'一些站点(不是我的)通过创建一个将使用一些javascript代码的greasemonkey脚本来满足我的需求。我已经搜索了stackoverflow和其他地方,但是coudn没有找到解决这个特定问题的方法。问题是DIV中有一些链接,它们没有附加ID或类,所以我不能使用' getElement(s)By'(Id ,ClassName或TagName)。并且我无法使用getElementsByTagName,因为我无法弄清楚如何删除这些特定图像,因为我不想从页面中删除所有图像(对于instnace,文档中的第一个IMG)需要保持可见)。 这里我简化了页面源代码:
<body class="someclass">
<div id="instructions">
<img src="http://somesite.com/s7ad7sg/ds67sgs/2ys7s.jpg" alt="resized image">
</div>
<form id="some_form_id">
<div id="not_important"></div>
<div id="now_what">
<div=id="here_we_go">
<div>(some content here)</div>
<div>
some random text which is not between any tags
<img src="http://somesite.com/subfolder/subfolder/26256.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/33633.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/98461.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/38746.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/08456.jpg" alt="resized image2">
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</form>
</body>
^所以,我需要删除这些:
26256.jpg 33633.jpg 98461.jpg 38746.jpg 08456.jpg
^当他们没有附加任何课程或ID时,如何删除他们,以及他们的父DIV没有任何课程或ID?
任何人都知道如何通过使用javascript来做到这一点(请记住,(在代码顶部)的第一个图像需要保持可见。还有一个文本(不在里面
这些5张图片上方的标签> sais&#34;一些不在任何标签之间的随机文本&#34;。该文本需要保留,所以我不能完全删除包含所有内容的整个DIV。无名DIV需要只留下那段文字。
提前致谢!
(同样,我不拥有该网站,因此我无法通过编辑来更改html源代码)
修改
谢谢大家试图帮助我!我已经测试了你的所有建议。也许是因为我只是一个菜鸟,但只有一段代码有效。它是 CertainPerformance :
document.head.appendChild(document.createElement('style'))
.textContent = '#here_we_go img { display: none; }';
^所以那个人工作了。我不知道为什么第一种方法不起作用。
我也一直在谷歌搜索,我已经找到了一些我调整过的其他代码示例&#39;并经过测试,所以这个也有效:
var imgs = document.querySelectorAll('#here_we_go img'), i;
for (i = 0; i < imgs.length; ++i) {
imgs[i].style.display = "none";
}
答案 0 :(得分:0)
getElementsBy *方法返回HTMLCollections,这可能很难处理。请考虑使用querySelectorAll,它返回一个静态NodeList - 与HTMLCollection不同,它可以直接迭代,在迭代过程中不会发生变化,而且它更加灵活。 / p>
像这样:
document.querySelectorAll('#here_we_go img')
.forEach((img) => img.remove());
这将选择img
div的最终后代的所有here_we_go
,并将其从DOM中删除。
另一种方法是用CSS隐藏它们:
document.head.appendChild(document.createElement('style'))
.textContent = '#here_we_go img { display: none; }';
答案 1 :(得分:0)
使用<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</g>
</svg>
并为这些图片传入选择器,document.querySelectorAll
答案 2 :(得分:0)
首先通过此
获取图像srcvar someimage = document.getElementById('here_we_go');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;
现在,如果mysrc == 26256.jpg
,则使此图片显示为无。
答案 3 :(得分:0)
在jquery中:
$("img:nth-of-type(2)").remove();
$("img:nth-of-type(3)").remove();
$("img:nth-of-type(4)").remove();
$("img:nth-of-type(5)").remove();
$("img:nth-of-type(6)").remove();
答案 4 :(得分:0)
使用ID定位最近的父元素,并使用querySelectorAll
获取所有img
。使用forEach
进行迭代,remove
删除元素
let getImgs = document.getElementById('here_we_go')
.querySelectorAll('img')
.forEach(function(item) {
item.remove();
})
&#13;
<body class="someclass">
<div id="instructions">
<img src="http://somesite.com/s7ad7sg/ds67sgs/2ys7s.jpg" alt="resized image">
</div>
<form id="some_form_id">
<div id="not_important"></div>
<div id="now_what">
<div id="here_we_go">
<div>(some content here)</div>
<div>
some random text which is not between any tags
<img src="http://somesite.com/subfolder/subfolder/26256.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/33633.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/98461.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/38746.jpg" alt="resized image2">
<img src="http://somesite.com/subfolder/subfolder/08456.jpg" alt="resized image2">
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</form>
</body>
&#13;