在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 元素如下:
新浏览器 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");