javascript从no id / class DIV元素中删除没有id / class图像

时间:2018-04-15 02:53:30

标签: javascript

我试图调整'一些站点(不是我的)通过创建一个将使用一些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";
}

5 个答案:

答案 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)

首先通过此

获取图像src
var 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删除元素

&#13;
&#13;
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;
&#13;
&#13;