Подскажите, как лучше в моем примере написать функцию для нумерации элементов? Нужно чтобы когда удаляешь, или добавляешь элемент в список, нумерация была всегда правильная ( чтобы учитывались удаленные или добавленные элементы). Также нужно учитывать, что количество списков может быть много
let deleteBtn = document.querySelectorAll(".delete");
let block1 = document.getElementById("block1");
let block2 = document.getElementById("block2");
for (let i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].addEventListener("click", function(el){
el.target.parentNode.remove();
})
}
let addElement = document.querySelector(".btn-add1");
let addElement2 = document.querySelector(".btn-add2");
addElement.addEventListener("click", function(){
let node = document.createElement("li");
block1.appendChild(node);
})
addElement2.addEventListener("click", function(){
let node = document.createElement("li");
block2.appendChild(node);
})
ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 20px;
}
li {
width: 50%;
height: 20px;
display: block;
background: #3498db;
border-bottom: 2px solid #2980b9;
}
span.delete {
float: right;
color: #fff;
cursor: pointer;
}
span.delete:hover {
color: #bdc3c7;
}
<ul id="block1">
<li>1 <span class="delete">delete</span></li>
<li>2 <span class="delete">delete</span></li>
<li>3 <span class="delete">delete</span></li>
<li>4 <span class="delete">delete</span></li>
<li>5 <span class="delete">delete</span></li>
</ul>
<ul id="block2">
<li>1 <span class="delete">delete</span></li>
<li>2 <span class="delete">delete</span></li>
<li>3 <span class="delete">delete</span></li>
<li>4 <span class="delete">delete</span></li>
<li>5 <span class="delete">delete</span></li>
</ul>
<button class="btn-add1">Добавить в 1 блок</button>
<button class="btn-add2">Добавить в 2 блок</button>
ol
, вместоul
– Grundy♦ 27 авг '17 в 17:53