javascript - js中怎么删除由createElement添加的多个重复的元素标签？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

PHPz 2017-04-11 11:44:57

[JavaScript讨论组]

621

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

学习是最好的投资！

全部回复(5)

PHP中文网2017-04-11 11:46:57 5楼

这里用一个数组记录，再在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=[]
}

赞 +0

添加回复

PHP中文网2017-04-11 11:46:57 4楼

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

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

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

赞 +0

添加回复

ringa_lee2017-04-11 11:46:57 3楼

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

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

赞 +0

添加回复

伊谢尔伦2017-04-11 11:46:57 2楼

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

赞 +0

添加回复

高洛峰2017-04-11 11:46:57 1楼

parent.innerHTML=' '

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>