堆棧內存溢出
  簡體   English   中英

javascript從無id / class DIV元素中刪除任何id / class圖像

[英]javascript remove no id/class images from no id/class DIV element

 原文  2018-04-15 02:53:29  5   5    javascript

問題描述

我試圖通過創建一個使用一些javascript代碼的油脂猴子腳本來“調整”一些站點（不是我的站點）以滿足我的需要。 我已經搜索了stackoverflow和其他地方，但找不到該特定問題的解決方案。 問題是DIV元素內有一些鏈接沒有ID或類，因此我不能使用'getElement（s）By'（Id，ClassName或TagName）。 而且我不能使用getElementsByTagName，因為我不想弄清楚如何刪除這些特定的圖像，因為我不想從頁面的中刪除所有圖像（為了方便起見，文檔中的第一個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張圖片，上面寫着“某些隨機文本，不在任何標簽之間”。 該文本需要保留，因此我不能暗示刪除包含所有內容的整個DIV。 無名DIV只需要保留該文本即可。

提前致謝！

（同樣，我不擁有該網站，因此無法通過對其進行編輯來更改html源代碼）

編輯：
謝謝大家對我的幫助！ 我已經測試了您的所有建議。 也許是因為我只是菜鳥，但是只有一段代碼有效。 這是某些性能提供的第二種方法： 

document.head.appendChild(document.createElement('style'))
  .textContent = '#here_we_go img { display: none; }';

^所以一個人工作了。 我不知道為什么第一種方法不起作用。

我也一直在Google上搜索，並且找到了一些我“調整”並測試過的代碼示例，因此該示例也可以工作： 

var imgs = document.querySelectorAll('#here_we_go img'), i;
for (i = 0; i < imgs.length; ++i) {
  imgs[i].style.display = "none";
}

5 個解決方案

解決方案1
 0 已采納  2018-04-15 02:58:15

getElementsBy *方法返回HTMLCollections，這可能很難使用。 考慮使用querySelectorAll，它返回一個靜態NodeList －與HTMLCollection不同，它可以直接進行迭代，在進行迭代時不會更改，並且更加靈活。

像這樣： 

document.querySelectorAll('#here_we_go img')
  .forEach((img) => img.remove());

這將選擇所有here_we_go div的最終img ，並將它們從DOM中刪除。

另一種方法是用CSS隱藏它們： 

document.head.appendChild(document.createElement('style'))
  .textContent = '#here_we_go img { display: none; }';

解決方案2
 0  2018-04-15 02:59:29

使用document.querySelectorAll並為這些圖像傳入選擇器， document.querySelectorAll('#here_we_go>div>img')

解決方案3
 0  2018-04-15 03:02:35

首先通過此獲取圖像src 

var someimage = document.getElementById('here_we_go');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;

現在，如果mysrc == 26256.jpg則使該圖像不顯示。

解決方案4
 0  2018-04-15 03:06:03

在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();

解決方案5
 0  2018-04-15 03:07:38

使用id定位最接近的父元素，並使用querySelectorAll獲取所有img forEach進行迭代並remove以刪除該元素 

 let getImgs = document.getElementById('here_we_go') .querySelectorAll('img') .forEach(function(item) { item.remove(); }) 
 <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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 javascript從div ID添加/刪除類？ 從父元素中刪除類ID JavaScript 使用 div class 聚焦特定元素，而不是 div id 聲明 如何將此javascript從div ID更改為類ID 使用Javascript刪除沒有ID或類的div 如何使用 JavaScript 從 class id 中找到單擊的 div 元素？ 如何在Javascript中按類和ID添加和刪除類 從.tree中刪除所有domtree中的#div id Javascript-從元素（不帶ID /類）中刪除句子，但保留其余內容 如何從刪除的可排序元素中獲取div類名稱/ ID？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM