javascript - 单击时删除文本 - javascript

Question

我正在编写一个代码，可以使用两个函数添加列表元素文本并在单击文本中的特定部分时将其删除 - add_in() 和 del_in()。所以如果我点击添加按钮，它应该添加“阅读(del)”当我单击文本 del 时，它应该将其删除。我在这里寻找获取被点击元素的 id，并使用了事件目标。

在add_in()中，它添加了列表元素，我使用innerHTML更改了它的内容，因此它包含(del)的p元素。delNode 在单击时应启动 del_in()。在 del_in() 中，它有 addEventListener 来获取单击元素的 id，如果是 (del)，则删除。

html

<ol id='interests'>
//should be added here.
</ol>
<input type="text" id='add_int'></input>
<input type="button" value="add" id='add_btt' onclick='add_in();'>

JavaScript

var idcount = 0;

function add_in() {
    nodeId = "new" + idcount;
    ++idcount;
    var interest = document.getElementById('add_int').value;
    var newNode = document.createElement("li");
    newNode.setAttribute("id", nodeId);
    newNode.innerHTML = interest + "<p id='del" + nodeId + "'>(del)</p>";
    document.getElementById("interests").appendChild(newNode);
    var delNode = document.getElementById('del' + nodeId);
    delNode.setAttribute("onclick", "del_in();");

}

function del_in() {
    var clickId = "";
    document.addEventListener("click", function(e) {
        clickId = e.target.id;
    });
    if (clickId.includes("delnew")) {
        var clickEle = document.getElementById(clickId);
        clickEle.parentNode.removeChild(clickEle);
    }
}

可以添加，但不能删除。单击时没有任何反应。如果我在控制台中输入“newNode”，它会显示:VM247:1 Uncaught ReferenceError:delNode 未定义。单击元素后，ClickId 也未定义。

感谢您提前提供的任何帮助。如果代码看起来太复杂或者问题看起来太半途而废，请告诉我。我来编辑。

Answer 1

var idcount = 0;

function add_in() {
    nodeId = "new" + idcount;
    ++idcount;
    var interest = document.getElementById('add_int').value;
    var newNode = document.createElement("li");
    newNode.setAttribute("id", nodeId);
    newNode.innerHTML = interest + "<p id='del" + nodeId + "'>(del)</p>";
    document.getElementById("interests").appendChild(newNode);
    var delNode = document.getElementById('del' + nodeId);
    delNode.setAttribute("onclick", "del_in(this);");

}

function del_in(e) {    
    e.parentNode.remove();
}

<ol id='interests'>
//should be added here.
</ol>
<input type="text" id='add_int'></input>
<input type="button" value="add" id='add_btt' onclick='add_in();'>

最简单的方法，您可以尝试选择父元素并更改它 e.parentNode.remove();