javascript - js中怎么删除由createElement添加的多个重复的元素标签?
PHPz
PHPz 2017-04-11 11:44:57
0
5
390

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

学习是最好的投资!

全部回复 (5)
Ty80

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

var added=[],parent=document.body; function add(){ var ina=document.createElement("p"); ina.innerHTML="HelloWorld
"; 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=[] }
    Ty80

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

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

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

      左手右手慢动作

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

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

        导致只能删一个的原因是每次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('没了!'); } }
          小葫芦

          parent.innerHTML=' '

            最新下载
            更多>
            网站特效
            网站源码
            网站素材
            前端模板
            关于我们 免责声明 Sitemap
            PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!