J'essaie d'ajuster un site (qui n'est pas le mien) à mes besoins en créant un script greasemonkey qui utilisera des codes javascript. J'ai déjà recherché stackoverflow et d'autres endroits, mais je n'ai pas trouvé la solution à ce problème spécifique. Et le problème est qu'il y a des liens à l'intérieur d'un élément DIV qui n'ont pas d'ID ou de classe attaché, donc je ne peux pas utiliser 'getElement (s) By' (Id, ClassName ou TagName). Et je ne peux pas utiliser getElementsByTagName parce que je ne peux pas comprendre comment supprimer ces images spécifiques car je ne veux pas supprimer toutes les images de la page (pour instnace, le premier IMG dans le document est nécessaire pour rester visible) . Ici, j'ai simplifié le code source de la page:

<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>

^ Donc, je dois les supprimer:

26256.jpg 33633.jpg 98461.jpg 38746.jpg 08456.jpg

^ Comment les supprimer lorsqu'ils n'ont pas de classe ou d'ID attaché à eux, et que leur DIV parent n'a pas de classe ou d'ID?

Tout le monde sait comment faire cela en utilisant javascript (gardez à l'esprit que la première image dans le (en haut du code) doit rester visible. Il y a aussi un texte (qui n'est pas à l'intérieur

Tags) au-dessus de ces 5 images qui disent "du texte aléatoire qui n'est pas entre les tags". Ce texte doit rester, donc je ne peux pas supprimer complètement la DIV entière qui contient tout. DIV sans nom doit rester avec seulement ce texte dans le cadre de celui-ci.

Merci d'avance!

(encore une fois, je ne suis pas propriétaire du site, donc je ne peux pas changer le code source html en le modifiant)

MODIFIER:
Merci à tous d'avoir essayé de m'aider! J'ai testé toutes vos suggestions. Peut-être parce que je suis juste un noob, mais un seul morceau de code a fonctionné. Il s'agit de la 2e méthode fournie par CertainPerformance :

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

^ Alors celui-là a fonctionné. Je ne sais pas pourquoi la première méthode n'a pas fonctionné.

J'ai également continué à chercher sur Google, et j'ai trouvé d'autres exemples de code que j'ai `` ajustés '' et testés, donc celui-ci fonctionne également:

var imgs = document.querySelectorAll('#here_we_go img'), i;
for (i = 0; i < imgs.length; ++i) {
  imgs[i].style.display = "none";
}
1
sarah997 15 avril 2018 à 05:53

5 réponses

Meilleure réponse

Les méthodes getElementsBy * renvoient HTMLCollections, ce qui peut être difficile à utiliser. Envisagez plutôt d'utiliser querySelectorAll, qui retourne une NodeList statique - contrairement à HTMLCollection, il peut être itéré directement, il ne changera pas pendant qu'il est itéré, et il est beaucoup plus flexible.

Comme ça:

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

Cela sélectionnera tous les img qui sont des descendants éventuels du here_we_go div et les supprimera du DOM.

Une autre méthode consiste à les masquer avec CSS à la place:

document.head.appendChild(document.createElement('style'))
  .textContent = '#here_we_go img { display: none; }';
0
CertainPerformance 15 avril 2018 à 02:58

Ciblez l'élément parent le plus proche avec id et utilisez querySelectorAll pour obtenir tous les img. Utilisez forEach pour itérer et remove pour supprimer l'élément

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>
0
brk 15 avril 2018 à 03:07

Obtenir d'abord les images src par ce

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

Maintenant, si mysrc == 26256.jpg, faites en sorte que cette image n'en affiche aucune.

0
Fokrule 15 avril 2018 à 03:02

Utilisez document.querySelectorAll et passez le sélecteur pour ces images, qui serait document.querySelectorAll('#here_we_go>div>img')

0
aprouja1 15 avril 2018 à 02:59

En 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();
0
M.A.Williams 15 avril 2018 à 03:06