Question

这是我自己的网站https://celestialbunny.github.io/frontend_02/，我正在尝试进行一些“转储”-通过普通的javascript从页面中删除某些元素。

我尝试过：

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

在这种情况下，可以说我只做过

let body = document.body;
let navs = document.querySelectorAll('nav');
body.remove(navs) 这将导致整个页面的删除。

我试图参考https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove上的文档，但我似乎无法理解为什么从“ body”中删除“ child”会导致“空白页”

如何删除特定元素而不影响其余元素？

Answer 1

您的语法不正确。你不需要身体。

img的示例：

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

如果使用document.querySelectorAll()选择HTML元素，则会返回NodeList。 NodeList与数组相似，但是您不能直接循环它。

要删除NodeList中的目标元素，您必须遍历List。

使用[...imgs]或Array.from(imgs)将NodeList转换为数组。现在，您可以遍历数组并删除其成员。

Answer 2

您将索引传递到删除功能中。

在这里进行导航：

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

然后您有一个查询选择列表，一个导航列表

假定数组不为空，然后选择要从DOM中删除的一项：

navs.remove(0)

这将删除导航列表中的第一项。

Answer 3

您给出的链接为.remove()，用于从集合中删除元素，并且该元素将要删除的元素索引作为参数。因此，要从您的身体中移除所有导航仪，您将不得不遍历所有导航仪并将其删除。

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

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

从HTML删除所选元素的简单方法

3 个答案: