В общем есть блок внутри которого есть определенное значение, суть в том что блоки можно удалять, но проблема в том что id будет оставаться прежним, например если 8 блоков, я удаляю 7 блок, а остаются с 1 по 6 потом сразу 8 и всё, так вопрос в том, как можно сделать что бы они все шли по порядку, а 8 например становился 7, что бы не было пробелов?
Нашел рабочий пример в интернете как раз по вашей теме, тут есть одна функция, которая с помощью forEach всё сортирует, ну и обработчик события, который при клике на текст закрыть у которого класс close-button, удаляет элемент, и в конце удаления, вызывается метод сортировки, который придает именно id значениям нормальный вид, последовательный)
function sortItemIds() {
$('[class^=general_]').each(function (ind) {
ind = 1;
$(this).attr('class', 'general_' ind);
$(this).find('[align="center"]').attr('data-id', ind);
$(this).find('.close-button').attr('class', 'close-button close-button_' ind);
});
}
$("body").on("click", ".close-button", function () {
var $close = $(this);
var $block = $close.prev();
var $container = $close.parent();
const index = $block.attr('data-id');
$('.general_' index).remove();
sortItemIds();
});
Сами html блоки, с кучей классов, при клике на внутренний блок Закрыть удаляется весь блок, но затем изменяется значение id и классов.
<div class="general_1"><div align="center" data-id="1">Блок 1<div class="close-button close-button_1">Закрыть
<div class="general_2"><div align="center" data-id="2">Блок 2<div class="close-button close-button_2">Закрыть
<div class="general_3"><div align="center" data-id="3">Блок 3<div class="close-button close-button_3">Закрыть
<div class="general_4"><div align="center" data-id="4">Блок 4<div class="close-button close-button_4">Закрыть
<div class="general_5"><div align="center" data-id="5">Блок 5<div class="close-button close-button_5">Закрыть