Уменьшить оставшиеся идентификаторы после функции remove ()

Похоже, вы должны использовать классы и ссылаться на элементы по индексу. Идентификаторы должны оставаться постоянными для ясности.

document.getElementsByClassName('my-class')[2].remove();

<div class="my-class" id="thing1">One</div>
<div class="my-class" id="thing2">Two</div>
<div class="my-class" id="thing3">Three</div>
<div class="my-class" id="thing4">Four</div>

Это, вероятно, будет лучше всего достигнуто с помощью jquery.

Вот рабочий код ниже:

$("div").each(function(i) {    
		$(this).attr('id', ++i);
});

$("#remove").click(function() {
  $("#2").remove();
  $("div").each(function(i) {    
		$(this).attr('id', ++i);
});
});

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

<a href="#" id="remove">remove</a>

Как это устроено

Первый $(this).attr('id', ++i); эта строка используется для добавления числа в div id. Я повторил это в функции удаления [ ("#remove").click(function() ] Это потому, что после удаления div будет изменение числа.

Это на самом деле является петлей. Без всех строк кода. Вот почему я люблю jquery :)

Имя идентификатора div находится здесь после того, как они были записаны $("#2").remove(); #2 ссылается на <div id="2"> Как и в css.

Если вы заметили, что при проверке номера сдвигаются вниз как 1, удаляется в соответствии с вашим запросом.

Чтобы использовать jquery, вы должны связать библиотеку. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Чистая версия Javascript

function resetId(){
    var div=document.getElementsByClassName("div")
    for(i in div){
        div[i].id=i++
    }
}

function clicked() {
	var elem = document.getElementById("1");
  elem.parentNode.removeChild(elem);
  resetId();
}

<div class="div" id="0">div</div>
<div class="div" id="1">div</div>
<div class="div" id="2">div</div>
<div class="div" id="3">div</div>

<a href="#" onclick="clicked()">Remove</a>

Как это устроено

В этом разделе ваш цикл:

for(i in div){
    div[i].id=i++
}

Этот раздел довольно просто переписывает числа 0 - 4 после того, как один был удален. Причина, по которой он начинается с 0, заключается в том, что в программировании мы начинаем считать с 0. Hay 0 - это тоже число, ребята :).

i++ - это, по сути, мини-int [ish], который увеличивается по мере того, как цикл считает количество делений.

Это var elem = document.getElementById("1"); & this elem.parentNode.removeChild(elem); Вот почему я считаю jquery более приемлемым в этой ситуации. Это немного меньше ошибок.

Наконец resetId(); Мы должны вызвать функцию, иначе это не означает, что что-то изменилось, потому что компьютеры глупы и должны быть проинформированы.

Furter Reading

https://api.jquery.com/

http://www.lucemorker.com/blog/javascript-vs-jquery-quick-overview-and-comparison

Используйте класс для каждого элемента, например так:

<div class="a" id='1'></div>
<div class="a" id='2'></div>
<div class="a" id='3'></div>
<div class="a" id='4'></div>

И вызывайте следующую функцию после каждого удаления:

function resetId(){
    var list=getElementsByClassName("a")
    for(i in list){
        list[i].id=i+1
    }
}

Я надеюсь, это поможет!

Вы можете добиться этого, переписав все идентификаторы до запуска кода

//be careful with this selector. Add parent element to selector to run in your environment.
//get all divs
var all_divs = document.querySelectorAll('div');
//rearrange their ID
for (var i=0;i<all_divs.length;i++) {
  all_divs[i].id = i+1
}