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”

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中无法使用 - 请参阅ChildNode.remove() on MDN。

Answer 2

您不能将click作为函数名称，因为click是保留的js方法。

要删除，您只需在该节点上使用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()"/>

Answer 3

几点输入：

click函数永远不会被保留，因为它是保留的，并且优先于附加到click()事件的onclick处理程序。将处理程序名称更改为有意义的名称
使用querySelectorAll查找img元素。它返回一个非实时NodeList所有元素，这些元素来自调用它的元素，该元素与指定的CSS选择器组匹配。
代码images[i].Node.removeChild(images[0]);与we should remove the element中的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();" />

JS无法从页面中删除所有图像

3 个答案: