4
votes

Ancienne méthode simple pour supprimer les éléments sélectionnés du HTML

ceci est mon propre site Web https://celestialbunny.github.io/frontend_02/ I j'essaye de faire du "dumping" - en supprimant certains éléments de la page via du javascript brut.

J'ai essayé:

let body = document.body
let navs = document.querySelectorAll('nav');
let headers = document.querySelectorAll('header');
let footers = document.querySelectorAll('footer');
let imgs = document.querySelectorAll('img');
let as = document.querySelectorAll('a');
let links = document.querySelectorAll('link');
let scripts = document.querySelectorAll('script');

body.remove(navs);
body.remove(headers);
body.remove(footers);
body.remove(imgs);
body.remove(as);
body.remove(links);
body.remove(scripts);

Voici le cas, disons simplement que je fait seulement:

let body = document.body;
let navs = document.querySelectorAll ('nav');
body.remove (navs) Cela entraînera la suppression de la page entière.

J'ai essayé de consulter la documentation sur https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove et je n'arrive pas à comprendre pourquoi la suppression de "child" de "body" se traduira par un " page blanche "

Comment puis-je supprimer l'élément particulier sans affecter le reste?

javascript html

0 commentaires

3 Réponses :

2
votes

Votre syntaxe n'est pas correcte. Vous n'avez pas besoin de corps.

exemple pour img:

const imgs = document.querySelectorAll('img');
[...imgs].forEach(e => e.remove());

Si vous sélectionnez HTML-Elements avec document.querySelectorAll () , vous récupérez une NodeList. Une NodeList est similaire à un tableau mais vous ne pouvez pas la boucler directement.

Pour supprimer les éléments cibles de la NodeList, vous devez parcourir la liste en boucle.

Avec [... imgs] ou avec Array.from (imgs) vous convertissez la NodeList en Array. Vous pouvez maintenant parcourir le tableau et supprimer ses membres.

1 commentaires

Merci @dhe, je l'ai affiné en ce dont j'ai besoin et je l'ai fait fonctionner: const deletes = ['nav', 'header', 'footer', 'img', 'a', 'link', 'script']; for (i dans les suppressions) {const item = document.querySelectorAll (supprime [i]); [... élément] .forEach (e => e.remove ())}

0
votes

Vous passez l'index dans la fonction de suppression.

prenons les navigations ici:

let navs = document.querySelectorAll ('nav');

alors vous avez une liste de sélection de requêtes, un tableau de nav

En supposant que le tableau n'est pas vide, vous sélectionnez ensuite l'un des éléments à supprimer du DOM:

navs.remove(0)

qui supprimera le premier élément de la liste de navigation.

0 commentaires

0
votes

Le lien que vous avez donné dit .remove () est utilisé pour supprimer un élément de la collection et il prend l'index de l'élément à supprimer comme paramètre. Donc, pour supprimer tous les navs de votre corps, vous devrez parcourir les navs et les supprimer.

<nav>Test</nav>
<nav>Test2</nav>
<div>Test3</div>

let navs = document.querySelectorAll('nav');
[...navs].forEach(n => n.remove());

0 commentaires