Удалить текст при нажатии - JavaScript

Question

Я пишу код, который позволяет добавлять текст элемента списка и удалять его при нажатии на определенную часть текста, используя две функции - add_in () и del_in (). поэтому, если я нажимаю кнопку добавления, он должен добавить «чтение и когда я нажимаю на текст del, он должен удалить его. Я искал здесь идентификатор элемента clicked и использовал цель события.

В add_in () он добавляет элемент списка, и я изменяю его содержимое с помощью innerHTML, чтобы он содержал элемент p (del). delNode должен запускаться del_in () при нажатии. В del_in () он имеет addEventListener для получения идентификатора элемента, по которому щелкнули, и, если это (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();'>

1008 * 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 ();