Не прослушивается AddEventListener, либо не находится родительский элемент

Вероятнее всего, не работает фрагмент фрагмент с определением родительского элемента (this.parentElement). В итоге не работает событие. По клику на close должно происходить исчезновение родительского элемента li.


            <div class="add_list">
                <input id="input" type="text" placeholder="write something">
                <span onclick="newElement()" class="addBtn">Add</span>
            </div>


            <ul id="ul">
                
            </ul>

let nodeList = document.getElementsByTagName('li')

for (i=0, i < nodeList.length; i++;) {
    let span = document.createElement("span");
    let txt = document.createTextNode("REM");
    span.className = "close";
    span.appendChild(txt)
    nodeList[i].appendChild(span)

}


let close = document.getElementsByClassName("close");
var i;
for (i=0; i < close.length; i++) {
    close[i].onclick = function(){
        let par = this.parentElement;
        par.style.display = "none"
    }
}


let list = document.querySelector('ul');
list.addEventListener('click', function(ev){
    if (ev.target.tagName === "LI") {
        ev.target.classList.toggle('checked');
    }
}, false);


function newElement() {
    let li = document.createElement('li');
    let inputValue = document.getElementById('input').value;
    let t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something")
    } else {
        document.getElementById('ul').appendChild(li);
    }
    document.getElementById('input').value = "";
    let span = document.createElement('span');
    let txt = document.createTextNode("REM");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i=0, i < close.length; i++;) {
        close[i].onclick = function(){
            let div = this.parentElement;
            div.style.display = "none"
        }
    }
}

Ответы (1 шт):

Автор решения: Pavel Nazarian

У вас уже есть слушатель на ul. Добавьте туда скрытие элемента.

list.addEventListener('click', function(ev){
    if (ev.target.tagName === "LI") {
        ev.target.classList.toggle('checked');
        return;
    }
    if (ev.target.classList.contains('close')) {
        ev.target.closest('li').hidden = true;
    }
}, false);
→ Ссылка