JS无法删除页面上的所有图像

Question

我正在尝试从页面中删除所有的图片。该页面是HTML格式的。这是我的HTML按钮：

<input id="clickMe" type="button" value="Delete Images" onclick="click();" />

这个函数的作用是：

<script type="text/javascript">
  function click(){
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
    images[i].Node.removeChild(images[0]);
    }
  } 
</script>

所有元素都被标记为“img”。

- Kat Roz

---

你有检查控制台报错吗？我可以告诉你Node不是你要找的名称，你也不应该使用images[0]。还有，由于它是一个实时集合，所以你将会在迭代数组时遇到麻烦。 - Mike Cluck

是的，Node 不是你要找的名称，并且每次尝试删除 images[0]，所以它不起作用。你想要删除 images[i]！;) - R. Foubert

只要 images[0] 为真，就将其删除。由于 images 是一个实时列表，每次删除一个元素后，images[0] 将会改变，直到没有剩余元素并变成 undefined。 - Paul

while( images[0] ) images[0].parentNode.removeChild( images[0] ); - Paul

我尝试使用images[0]控制流程，但它不起作用。 - Kat Roz

Answer 1

从父元素中删除子元素：

function removeImages() {
  var images = [].slice.call(document.getElementsByTagName('img'), 0); // get the images as array like object, and turn it into an array using slice

  images.forEach(function(img) { // iterate the images array
    img.parentNode.removeChild(img); // remove the child node via the parent node
  });
}

<button type="button" onclick="removeImages()">Remove Images</button>

<div>
  <img src="http://static.wixstatic.com/media/60d837_94f714500a3145a1b98efd7a6fe78ce7~mv2_d_3456_3456_s_4_2.jpg_256" />

  <img src="https://static-s.aa-cdn.net/img/ios/442131982/82d94c67fc3d8eb87e07d9bb568c5d4d?v=1" />

  <img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg" />

</div>

你也可以使用 img.remove() 代替繁琐的 img.parentNode.removeChild(img)，但在IE中不起作用 - 参见 MDN上的ChildNode.remove()。

- Ori Drori

---

click() 不会被调用。 - Pranesh Ravi

是的。你说得对。那真的很有趣。我已经修复了它。 - Ori Drori

"只能从父级执行"。事实并非如此。现代浏览器允许您执行 node.remove()。您应该解释您所做的所有更改以及原因。 - user1106925

我已经明确说明了要“删除一个子项” :) 我将在代码中添加更多信息。 - Ori Drori

Answer 2

因为click是JavaScript的一个保留方法，所以你不能将其作为函数名。

如果要删除节点，只需在该节点上使用delete()命令即可。

<script type="text/javascript">
  function c(){
    var images = document.getElementsByTagName('img');
    for (var i = images.length - 1; i >= 0; i--) {
      images[0].parentNode.removeChild(images[0]);
    }
  } 
</script>
<img  src="http://unsplash.it/200/300/"/>
<img  src="http://unsplash.it/200/300/"/>
<img  src="http://unsplash.it/200/300/"/>
<img  src="http://unsplash.it/200/300/"/>
<img  src="http://unsplash.it/200/300/"/>

<input id="clickMe" type="button" value="Delete Images" onclick="c()"/>

- Pranesh Ravi

---

保留字click被捕捉得好。 - Neo

顺便提一下 - node.remove() 在IE中不起作用。 - Ori Drori

Answer 3

需要翻译的内容：

• click函数永远不会被触发，因为它是保留的，并且优先于附加到onclick事件的click()处理程序。将处理程序名称更改为有意义的内容。

• 使用querySelectorAll查找img元素。它返回一个非实时的NodeList，其中包含从调用它的元素中下降的所有匹配指定组CSS选择器的元素。

• 代码images[i].Node.removeChild(images[0]);是不正确的，因为我们应该从parentNode中删除元素; 索引不正确（images[0]）

function deleteImages() {

  // query non-live NodeList of all `img` elements
  var images = document.querySelectorAll('img');

  // Loop through each `image` object.
  Object.values(images).forEach(function(element, index, array) {
    element.parentNode.removeChild(element);
  });

}

img {
  width: 200px;
  height: 200px;
  margin: 5px;
}

<div>
  <div>My List of ducks</div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Tufted_duck_%28aythya_fuligula%29.JPG/120px-Tufted_duck_%28aythya_fuligula%29.JPG" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tufted_Duck_pangolakha_Wildlife_Sanctuary_East_Sikkim_India_27.03.2016.jpg/120px-Tufted_Duck_pangolakha_Wildlife_Sanctuary_East_Sikkim_India_27.03.2016.jpg" />
</div>

<div>
  <div>My List of Flowers</div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Lillium_Stamens.jpg/300px-Lillium_Stamens.jpg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/220px-Crateva_religiosa.jpg" />
</div>

<input id="clickMe" type="button" value="Delete Images" onclick="deleteImages();" />

- L J