js中怎么删除由createElement添加的多个重复的元素标签？

Question

js中怎么删除由createElement添加的多个重复的元素标签？

问题描述：点击“添加”按钮，就会在网页上添加一个"HelloWorld"的p标签,点一次会添加一个；然后点击“删除”按钮，那么就会删除一个p标签，而剩下的不会删除。那么怎么删除剩下的标签呢？

HTML代码：

<button onclick="add()">添加</button>
<button onclick="del()">删除</button>

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);
}

Answer 1

这里用一个数组记录，再在del()里定义相关参数。

var added=[],parent=document.body;
function add(){
  var ina=document.createElement("p");
  ina.innerHTML="HelloWorld<br>";
  ina.style.color="red";
  ina.style.fontSize="20px";
  parent.appendChild(ina);
  added.unshift(ina);
}

1. 依次删完

function del(){
  if(!added[0])return;
  parent.removeChild(added[0]);
  added.shift();
}

2. 全删了

function del(){
  for (var i=added.length-1;i>=0;i--){ parent.removeChild(added[i]) }
  added=[]
}

Answer 2

思路大概是把dom记录下来，删除时循环记录把dom都删除了。

由于直接记录dom比较耗内存，可以给每个dom加上id，只把id记录下来删除也方便。

还有一种形式是都加上统一class，删除时query class出来循环删除就行了。

Answer 3

也可以采用递归的思想 一旦检测到有p元素存在，就一直删，直到删除完毕

function del(){
        var ina = document.body.querySelector('p')
        if (ina) {
            document.body.removeChild(ina)
            del()
        }
    }

Answer 4

导致只能删一个的原因是每次createElement时都会给变量ina重新赋值，导致它只能“记住”最后一次的值，所以删的时候也就只会删掉最后一个；所以我觉得新建的节点改用数组缓存下来可能能行吧：

var nodeArr = [];
var $body = document.body;

function add(){
    var ina = document.createElement("p");
    ina.innerHTML = "HelloWorld";
    ina.style.color = "red";
    ina.style.fontSize = "20px";
    $body.appendChild(ina);
    nodeArr.push(ina);
}

function del(){
    if (nodeArr.length != 0) {
        var ina = nodeArr.pop();
        $body.removeChild(ina);
    } else {
        alert('没了！');
    }
}

Answer 5

parent.innerHTML=' '