Список элементов с нумерацией js

Question

Есть список элементов и он весь пронумерован. Как можно сделать так, чтобы при удалении одного элемента из списка их нумерация не сбивалась ?
пример :

<ul>
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
</ul>

$('#1').on('click', function() {
   $(this).remove()
})
$('#2').on('click', function() {
   $(this).remove()
})
$('#3').on('click', function() {
   $(this).remove()
})
$('#4').on('click', function() {
   $(this).remove()
})

Answer 1

$('#1').on('click', function() {
  $(this).remove()
})
$('#2').on('click', function() {
  $(this).remove()
})
$('#3').on('click', function() {
  $(this).remove()
})
$('#4').on('click', function() {
  $(this).remove()
})

ul,
ol {
  padding: 0;
}

ul {
  list-style: none;
}

body {
  counter-reset: section;
}

li::before {
  content: "Count " counter(section) ": ";
  counter-increment: section;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
</ul>

Answer 2

Вот еще вариант, если я правильно понял вопрос. То вы можете считать массив и все будет гуд.

let elemets = ['Наверное', 'Вы', 'Хотите', 'Так', 'Ибо', 'Пишите', 'Детальнее'];
let listOfElemets = [];
let list = document.getElementById("list");


elemets.forEach(function(element) {
  listOfElemets.push("<li>" + element + "</li>");
});

list.innerHTML = listOfElemets.join('');

$('li').click(function(){
    $(this).remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id="list"></ol>

Добавил удаление по клику.

БЛОГ НА HUSL

Список элементов с нумерацией js

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