0

Вероятнее всего, не работает фрагмент фрагмент с определением родительского элемента (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"
        }
    }
}
6
  • ой какой эвент листенер когда там онклик ....
    – madina
    17 апр 2022 в 9:28
  • @madina извиняюсь, не проснулся ещё. Но, вообще говоря, не важно onclick тут или eventListener 17 апр 2022 в 9:32
  • cheked никакого отношения к нему не имеет. в css там просто изменение цвета. он работает
    – madina
    17 апр 2022 в 9:32
  • павел, это я себе говорю, сама написала в описание вопроса add event. он вроде бы в коллекциях массивах не канает
    – madina
    17 апр 2022 в 9:34
  • С чего бы он может в коллекциях "не канать"? 17 апр 2022 в 9:52

1 ответ 1

0

У вас уже есть слушатель на 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);
3
  • спасибо, хороший вариант. у меня кстати не работало из-за "," вместо ";" в параметрах цикла...
    – madina
    17 апр 2022 в 10:32
  • @Pavel Nazarian, а почему не используется function ({target}), дабы не мучаться с ev? У такого метода слабая поддержка? 17 апр 2022 в 12:05
  • @Oliver Patterson да уж какие мучения) Я лишь дописал в том виде, в котором у автора написано. 17 апр 2022 в 12:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.