javascript - 如何使用删除子项删除特定的附加子项?
问题描述
使用 Javascript 我编写了一个简单的清单,用户在其中输入他的列表,然后每个孩子都有一个黄色按钮,通过单击这个黄色框,它会删除一个特定的 div,但不幸的是,它会按照列表顶部的顺序删除到底部,但我想要它做的是删除自己的 div,仅此而已。
function Gen() {
var c = document.getElementById("inp1").value;
var div1 = document.createElement("div");
div1.style.background = "#3498DB";
div1.style.padding = "0.5rem";
div1.setAttribute("class", "d-flex justify-content-between");
div1.setAttribute("id", "div1");
var p1 = document.createElement("p");
p1.setAttribute("class", "font-y");
p1.style.padding = "0rem 0rem 0rem 1rem";
p1.style.margin = "0rem";
var div2 = document.createElement("div");
div2.setAttribute("id", "div2");
div2.style.width = "1rem";
div2.style.height = "1rem";
div2.style.background = "yellow";
div2.setAttribute("onclick", "Rem()");
var li = document.createElement("li");
li.style.margin = "1rem";
li.setAttribute("id", "li");
li.appendChild(div1);
div1.appendChild(p1);
div1.appendChild(div2);
p1.innerHTML = c;
document.getElementById("addr").appendChild(li);
return false;
}
按 div2 它应该删除 div1,但它自己的 div1 不是它上面的那个。
解决方案
代替
div2.setAttribute("onclick", "Rem()");
利用:
div2.onclick = () => li.remove();
这使用li
变量而不是尝试选择<li>
元素。
推荐阅读
- android - Android 调试模式下的 shadow$_klass_ 是什么?
- jquery - 在元素之前只插入一个结束标签?
- robotjs - RobotJS,如何在 Mac 上执行 shift 单击或命令单击?
- javascript - 如果更新失败,猫鼬 findByIdAndUpdate 会返回什么?
- regex - 如何正确处理和解析来自 rsyslog 的多行日志
- web-scraping - 如何在一个单元格中获取 IMPORTXML/IMPORTHTML 结果数据?
- javascript - 如何在打字稿中获取递归对象的类型作为函数参数?
- protractor - 如何处理应用程序条件消息/警报
- clickhouse - 在 Clickhouse 中获取原始低基数值
- apache - 拒绝访问不包括某些子页面的网站