js入门动态添加删除标签

guqiu 发布于2019-08-20 17:59 / 2619人阅读

摘要：动态添加删除运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况创建元素追加元素返回指定节点的父节点删除指定的元素节点。

js、动态添加删除

运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况

createElemen创建元素；

appendChild追加元素；

parentNode返回指定节点的父节点；

removeChild删除指定的元素节点。

第一步 HTML写法


    
        动态创建元素

css设置属性

#box{
    width：200px;
    height:200px;
    border:1px solid #ccc;
}

动态创建、删除元素

                //获取元素的ID
                var oBox=document.getElementById("box");
                var oTxt=document.getElementById("txt");
                var oBtn=document.getElementById("btn");
                
                //添加
                oBtn.onclick=function(){
                    var pp =document.createElement("p");
                    var del=document.createElement("input");
                    del.type="button";
                    del.value="删除";
                    wenben=oTxt.value;
                    pp.innerHTML=wenben;
                    pp.style.color="red";
                    oBox.appendChild(pp);
                    pp.appendChild(del);
                    //删除
                    del.onclick=function(){
                        pp.parentNode.removeChild(pp);
                    }
                        oTxt.value="";
                }

考虑一下正常的思路，我们通常是通过for循环来添加删除、但是那样肯定是执行不了代码的！
它为什么能把元素给删除掉呢，是因为咱们创建元素的时候就已经给他把那个click方法给添加进那个删除元素里边去了！
看一下下边的代码你就能明白了吧！

//获取元素的ID
                var oBox=document.getElementById("box");
                var oTxt=document.getElementById("txt");
                var oBtn=document.getElementById("btn");
                
                //添加
                oBtn.onclick=function(){
                    var pp =document.createElement("p");
                    var del=document.createElement("input");
                    del.type="button";
                    del.value="删除";
                    wenben=oTxt.value;
                    pp.innerHTML=wenben;
                    pp.style.color="red";
                    
                    //删除
                    del.onclick=function(){
                        pp.parentNode.removeChild(pp);
                    }
                        oTxt.value="";
                    oBox.appendChild(pp);
                    pp.appendChild(del);
                }

就是这个样子！有点眼熟，喜欢的话，点一下赞，谢谢！
下边附上演示地址。。。
http://runjs.cn/detail/xwqcq6on

GPU云服务器云服务器 js动态添加标签动态添加删除 js页面添加标签 js实现添加标签页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83987.html

微信小程序：入门基础教程

摘要：准备工作要开发微信小程序之前，需要做一些准备工作，首先进入然后再进入，接下来就解压源码包和安装微信开发工具，安装好开发软件之后，在桌面可以看到然后点击进入需要手机微信扫码确认登录，扫码完之后选择本地小程序项目选择添加项目之后如果想要学习一下准备工作要开发微信小程序之前，需要做一些准备工作，首先进入https://mp.weixin.qq.com/debu... showImg(ht...

lemanli 2019-08-21 11:51 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
jQuery 入门详解（一）

摘要：前面也花了不少时间，专门介绍了基础这一块，从最基础的讲起，再到以及特效。对象，文档对象模型，每一份都可以表示成一棵树。注意选择器返回的是对象。名称用法描述相当于，子类选择器相当于后代选择器查找兄弟节点，不包括自己本身。 showImg(https://segmentfault.com/img/remote/1460000013677116?w=1920&h=1080); jQuery ...

only_do 2019-08-22 15:20 评论0 收藏0
jQuery 属性与样式

摘要：与中用方法来获取和设置元素属性是属性的缩写，在操作中会经常用到有个表达式传入属性名获取属性的值属性名属性值设置属性的值属性名函数值设置属性的函数值给指定元素设置多个属性值，即属性名一属性值一属性名二属性值二删除方法为匹配的元素集合中的每个元 .attr()与.removeAttr() jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在j...

yibinnn 2019-08-21 11:52 评论0 收藏0