Как удалить упорядоченный список с помощью Javascript?

Question

Я дал 2 кода ниже--
Код 1: Ниже приведен мой код, использующий querySelector для выбора имени класса, который я хочу удалить.Но он удаляет только первый элемент списка и не работает для оставшегося списка, который также имеет имя класса, аналогичное первому элементу списка.
Почему это не работает после удаления первого элемента списка (после удаления первого списка, имя класса 'удалить 'также все еще там и не работает для них)?

Теперь перейдите на код 2 , и это мое решение вопроса.

//JAVASCRIPT ----CODE 1-----
let ol = document.querySelector('.remove');

ol.addEventListener('click',function(e){
    let length = document.querySelectorAll('li').length;
    if(length > 1){//ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
});

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}
  

<!-- HTML -->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

Код 2: решение с кодом 1.
Я использую здесь querySelector для ol , который является упорядоченным списком и внутри querySelector. Я использую if(e.target.className == "remove"), чтобы удалить элемент списка.

//JAVASCRIPT ----CODE 2-----
let ol = document.querySelector('ol');

ol.addEventListener('click',function(e){
    if(e.target.className == "remove"){ // only select element which has class name 'remove'
    let length = document.querySelectorAll('li').length;
    if(length > 1){ //ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
    }
});

/* CSS same as in code 1*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

<!-- HTML  same as in code 1-->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

Помогите мне: , но я не хочу использовать: document.querySelector('ol'), которые выбирают весь упорядоченный список, из-зана что он будет тратить память .
Я хочу получить свой ответ, который выбирает только имя класса 'удалить' вместо всего упорядоченного списка.

Мы можем использовать let ol = document.querySelectorAll('span.remove') которые выбирают все элементы имени класса 'remove', которые хранятся в виде массива в переменной ol, но после него, как мы можем выбрать тот элемент массива, который будет удален ?

Answer 1

Ответ на вопрос, почему не первая версия кода работает правильно, заключается в том, что вы определяете let ol = document.querySelector('.remove');, который принимает только первый элемент с этим классом и помещает его в память на странице загрузки.Итак, когда вы помещаете прослушиватель событий в него, вы назначаете его только тому элементу, который отсутствует после его удаления.Вот почему он работает только на первом элементе.Вам нужно будет использовать document.querySelectorAll, чтобы получить все элементы этого класса, а не только первый.

//JAVASCRIPT ----CODE 1-----
let ol = document.querySelectorAll('.remove');

ol.forEach(function(element){
    element.addEventListener('click',function(e){
    let length = document.querySelectorAll('li').length;
    if(length > 1){//ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
})
});

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

<!-- HTML -->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

Answer 2

Вы можете сделать это, чтобы удалить весь этот дополнительный код

document.querySelectorAll('.remove').forEach((item) => {
	item.onclick = (event) => {
		let length = item.parentElement.parentElement.children.length;
		if (length > 1) {
			item.parentElement.outerHTML = ""
		}
		
	};
});

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<div>
  <p>click on minus icon to remove list item</p>
  <ol>
  
    <li>list1 <span class="remove"> - </span></li>
    <li>list2 <span class="remove"> - </span></li>
    <li>list3 <span class="remove"> - </span></li>
    <li>list4 <span class="remove"> - </span></li>
    <li>list5 <span class="remove"> - </span></li>
  </ol>
  </div>
</html>

Объяснение:

Примечание: всякий раз, когда вы видите что-то вроде (item) => { etc.. }, вы можете думать об этом как о function (item) { etc.. }

это одно и то же.

Теперь ..

querySelectorAll выбирает все элементы.

Чтобы зациклить их, вы делаете .forEach()

Внутри forEach должна быть функция с хотя бы элементом в качестве параметра, представляющего элемент, который зацикливается на

, поэтому document.querySelectorAll("ol") возвращает список всех тегов OL

затем добавив document.querySelectorAll("ol").forEach((item)=>{ /* item is now each OL element */ })

, затем вы можете сделать document.querySelectorAll(".remove").forEach((item)=>{}), который получит любые элементы, соответствующие классу 'remove'

, наконец, вы просто используете привязку .onclick для добавления события, которое работает исключительнодля этого конкретного элемента, выполнив item.onclick = (event)=>{item.parentElement.parentElement.removeChild(item.parentElement); } или это может быть item.parentElement.outerHTML = "", которые оба имеют одинаковую функциональность.

Answer 3

ваш код не работает, потому что в вашем коде ol - это коллекция всех элементов с именем класса "remove".Таким образом, вы не можете использовать его как отдельный элемент, вы должны использовать цикл for для ol, чтобы получить доступ к каждому элементу с именем класса «remove».

Примерно так:

for (var i = 0; i < ol.length; i++) {
  ol[i].addEventListener('click', myFunction, false);
}