html一键清空数组中的内容,js删除元素对象或其内容（div、ulli、img、input等）

在Web前端设计过程中，用js删除元素对象经常会用到。例如某一个页面在加载完成时显示一条新闻，这条新闻只显示一次且仅显示一小段时间，则显示完后就需要把它删除或隐藏。

在 javascript 中，删除元素其实是移除元素，用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli、ulol，以及删除图片元素img、文本框元素input，都用 removeChild() 方法。

一、js删除div及其内容

假如有 div 如下：

js删除元素之div及其内容

这是段落内容

Javascript 代码如下：

var obj = document.getElementById("delId");

obj.innerHTML = "";//删除div内容

//删除div

var parentObj = obj.parentNode;//获取div的父对象

parentObj.removeChild(obj);//通过div的父对象把它删除

二、js删除ulli及其内容

假如有 ulli 如下：

• js删除元素之ulli及其内容
• olli也是一样的删除方法

Javascript 代码如下：

var obj = document.getElementById("ulId");

obj.innerHTML = "";//删除ul的内容(删除所有li)

//删除所有li的内容

var obj = document.getElementById("ulId");

var liObj = obj.childNodes;//li都是ul的孩子，所以通过 childNodes 获取所有li

for (var i = 0; i < liObj.length; i++) {

liObj[i].innerHTML = "";//循环删除所有li的内容

}

//删除ul

var parentObj = obj.parentNode;//获取ul的父对象

parentObj.removeChild(obj);//通过ul的父对象把它删除

三、js删除img元素

假如有 img 如下：

Javascript 代码如下：

var obj = document.getElementById("imgId");

var imgParent = obj.parentNode;//获取img的父对象

imgParent.removeChild(obj);//通过img的父对象把它删除

四、js删除input元素

1、js 删除一个 input 元素

假如有 input 如下：

Javascript 代码如下：

var obj = document.getElementById("inputId");

var inputParent = obj.parentNode;//获取input的父对象

inpuParent.removeChild(obj);//通过inpu的父对象把它删除

2、js 批量删除 input 元素

Html 元素如下：

Javascript 代码如下：

function removeInputs() {

var parent = document.getElementById("parent");

var inputs = parent.getElementsByTagName("input");

var arrLen = inputs.length;

for (var i = 0; i < arrLen; i++) {

if (inputs[i].getAttribute("type") == "text") {

inputs[i].parentNode.removeChild(inputs[i]);

}

//当删除 input 后，数组元素会减少，此时需要重新获取 input，可通过递归调用实现

if (inputs[i] == undefined && i < arrLen) {

removeInputs();

}

}

}

removeInputs();

Javascript 代码说明：

1、获取 input 元素也可以用 document.getElementsByTagName("input")，它是从整个网页中获取所有 input 元素，效率没有实例中从指定范围获取高。另外，还可以用 document.getElementsByName("input_text")，前提是 input 元素要设置相同的名称，如例中的 name="input_text"。

2、批量删除 input 元素时，数组元素会发生变化，导致无法删除所有 input 元素。例如：实例中共有 3 个 input 元素，当删除两个  input 元素后，再用 inputs[3] 获取第 3 个 input，将返回 undefined；此时需要重新获取 input。

五、js 用 class 属性删除 html 元素

Html 元素如下：

js 用 class 属性删除 html 元素

通过 class 属性删除 div

通过 class 属性移除 div

新浏览器 Javascript 代码：

function removeElementsByClass(className) {

var tags = document.getElementsByClassName(className);

var arrLen = tags.length;

for (var i = 0; i < arrLen; i++) {

tags[i].parentNode.removeChild(tags[i]);

//当删除 html 元素后，数组元素会减少，此时需要重新获取它们，可通过递归调用实现

if (tags[i] == undefined && i < arrLen) {

removeElementsByClass(className);

}

}

}

removeElementsByClass("divItem");

旧浏览器 Javascript 代码：

function removeElementsByClassForOldBrowser(className) {

var tags = document.all;

var arrLen = tags.length;

for (var i = 0; i < arrLen; i++) {

if (tags[i].className == className) {

tags[i].parentNode.removeChild(tags[i]);

//当删除 html 元素后，数组元素减少，此时需要重新获取它们，可用递归调用实现

removeElementsByClassForOldBrowser(className);

}

}

}

removeElementsByClassForOldBrowser("divItem");