Question

我正在编写一个代码，可以使用两个函数-add_in（）和del_in（）来添加列表元素文本，并在单击文本中的特定部分时将其删除。因此，如果我单击添加按钮，则应添加“阅读（del）” 当我单击del文本时，应将其删除。我在这里获取了clicked元素的ID，并使用了事件目标。

在add_in（）中，它添加了list元素，并且我使用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（）;

单击时删除文本-JavaScript

1 个答案: