js中怎么删除由createElement添加的多个重复的元素标签?
问题描述:点击“添加”按钮,就会在网页上添加一个"HelloWorld"的p标签,点一次会添加一个;然后点击“删除”按钮,那么就会删除一个p标签,而剩下的不会删除。那么怎么删除剩下的标签呢?
HTML代码:
JS代码:
function add(){ ina = document.createElement("p"); ina.innerHTML = "HelloWorld"; ina.style.color = "red"; ina.style.fontSize = "20px"; document.body.appendChild(ina); } function del(){ var parent = ina.parentNode; parent.removeChild(ina); }
这里用一个数组记录,再在
del()
里定义相关参数。1. 依次删完
2. 全删了
思路大概是把dom记录下来,删除时循环记录把dom都删除了。
由于直接记录dom比较耗内存,可以给每个dom加上id,只把id记录下来删除也方便。
还有一种形式是都加上统一class,删除时query class出来循环删除就行了。
也可以采用递归的思想 一旦检测到有p元素存在,就一直删,直到删除完毕
导致只能删一个的原因是每次
createElement
时都会给变量ina
重新赋值,导致它只能“记住”最后一次的值,所以删的时候也就只会删掉最后一个;所以我觉得新建的节点改用数组缓存下来可能能行吧:parent.innerHTML=' '