97c47f044702f9ba9ffc96018be904e1.gif

html代码

cc7d33deb232ce858c406c3d2c19368b.png

实现方式(1)

a5cdeac77c2845b6834892a1fb6bd3c1.png

删除的实现逻辑:

(1)在动态添加dom元素的时候,给每一个button添加一个clear的类名。

(2)获取页面中带有clear类名的button按钮。

(3)for循环遍历,添加onclick点击事件。

实现方式(2)

49ab34306cbc57634ae781f8e8364c81.png

删除的实现逻辑:

(1)在动态添加dom元素的时候,给每一个button添加一个del的点击事件。

(2)并且把this传过去

(3)执行点击事件。

两个人写的代码

第一种方式@前端菜鸟的进阶之路

function add(){ var input = document.getElementById('input').value; var tableBody= document.getElementById('table-body'); var list = ""+ input +" 删除" tableBody.innerHTML += list; let clear = document.getElementsByClassName('clear'); console.log(clear); for(let i = 0; i < clear.length; i++ ){ clear[i].onclick = function () { console.log(this.parentNode.parentNode); tableBody.removeChild(this.parentNode.parentNode); } }  }

第一种方式@前端大肥肥

 var tableBody = document.getElementById('table-body'); function add(){ var input = document.getElementById('input').value; if(!input) return false; var list = ""+ input +" 删除 " tableBody.innerHTML += list; } function del(_this) {  tableBody.removeChild(_this.parentNode.parentNode); }
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐