如何使用原生JavaScript移除div中的所有<img>元素

好问题！既然你已经熟悉jQuery的实现方式，那我来给你讲讲用原生JS怎么完成这个需求，有几种实用的方案：

方案一：用querySelectorAll遍历移除（推荐，简洁现代） #

这是最接近jQuery写法的原生实现，通过querySelectorAll获取目标div下的所有img元素，然后逐个移除：

// 获取.content下的所有img节点
const imgElements = document.querySelectorAll('.content img');
// 遍历并移除每个img
imgElements.forEach(img => img.remove());

注意：如果需要兼容非常老旧的浏览器（比如IE11及以前），NodeList的forEach方法不被支持，这时候可以转成数组再遍历：

Array.from(document.querySelectorAll('.content img')).forEach(img => img.remove());

方案二：通过父元素动态遍历移除（兼容老浏览器） #

如果你的项目需要兼容更老的环境，可以用getElementsByTagName获取动态集合，然后倒序遍历移除（避免动态集合的索引混乱问题）：

const contentDiv = document.querySelector('.content');
const imgCollection = contentDiv.getElementsByTagName('img');

// 倒着遍历，防止删除元素后集合长度变化导致遗漏
for (let i = imgCollection.length - 1; i >= 0; i--) {
  contentDiv.removeChild(imgCollection[i]);
}

为什么要倒序？因为getElementsByTagName返回的是动态HTMLCollection，每当移除一个元素，集合的长度会自动更新。如果正着遍历，移除第0个元素后，原本的第1个元素会变成第0个，循环索引+1后就会跳过它，倒序遍历就不会有这个问题。

方案三：清空父元素内容（仅限div内只有img的情况） #

如果你的.contentdiv里确实只有img元素，没有其他需要保留的内容，也可以直接清空父元素的HTML：

document.querySelector('.content').innerHTML = '';

这个方法虽然简单，但不够精准，如果以后div里添加了其他元素，会一并被清空，所以只推荐在确定div内只有img的时候使用。

内容的提问来源于stack exchange，提问作者hatched