Как изменять нумерацию div при добавлении и удалении?

Question

[merelyJunior]

Как обновлять нумерацию в div в зависимости от удаления/добавления?

Добавляем кнопкой #addItem 3 элемента:


Удаляем в середине 2-й и опять добавляем +1:


Нужно, чтобы после любых манипуляций нумерация шла по порядку, как на первом скриншоте.

let itemInner = $("#itemInner");
var itemLength = $("#itemInner.row").length;
$("#addItem").click(function (e) {
  e.preventDefault();
  itemLength++;
  var addedRow = `
    <div class='row '>
      <div class='item-num'>${itemLength}</div>
      <button id='deleteItem'><img src="/img/icons/delete.png"></button>
    </div>
  `;
  itemInner.append(addedRow);
});
itemInner.on("click", "#deleteItem", function (e) {
  e.preventDefault();
  $(this).closest("div").remove();
  itemLength--;
});

Comments

[0xD34F]

id='deleteItem'

Ну и какого хрена? Года с лишним не хватило, чтобы понять, что id должны быть уникальны? Меняйте на класс.

[Ankhena]

Стилями через counter-reset, counter-increment не проще?

Answer 1

[0xD34F]

Перестаньте заниматься ерундой и замените div'ы на ol + li.

Ну или хотя бы через css сделайте.

#itemInner {
  counter-reset: bullshit-counter;
}
.row {
  counter-increment: bullshit-counter;
}
.row::before {
  content: counter(bullshit-counter) "!!!";
}

А если всё-таки намерены продолжать говнокодить, то...

...долой счётчик itemLength, устанавливайте значения заново после каждой вставки/удаления:

itemInner.find('.item-num').text(i => i + 1);

Comments

[merelyJunior]

заменить не проблема, но как это решит вопрос?

[0xD34F]

merelyJunior, если это не решает вопрос, значит, вы, как бы это помягче выразиться, не тяните на гения. Не смогли объяснить, чего вам надо на самом деле.

[merelyJunior]

0xD34F, странно что у гения не хватает мозгов что бы понять

[0xD34F]

merelyJunior, а может, это вы чего-то не понимаете? Например, мой ответ. Вы голову-то включите, подумайте.

[merelyJunior]

0xD34F, пишешь абсолютную чушь
все делается легко и просто с помощью функций
горе "Куратор тега"

[0xD34F]

merelyJunior, может, мне посчастливиться увидеть какую-нибудь конкретику? Или жалкий писк про "абсолютную чушь" - это всё, на что вы способны?

Всё делается ещё легче и проще - вообще без "функций".

[merelyJunior]

0xD34F, очень жаль что "жалкий писк", а не конкретная помощь, доносится из уст куратора проекта

[0xD34F]

merelyJunior, конкретная помощь была предложена - целых три варианта. Не хватает мозгов воспользоваться? А зачем вообще тогда пытаетесь лезть в it? Подберите себе сферу деятельности, предъявляющую менее высокие требования к уровню умственного развития.

[merelyJunior]

0xD34F, жалко смотреть на тебя, специалист может и отличный, да вот только логика нулевая
И навыки коммуникации как на температура южном полюсе
удачи

[0xD34F]

жалко смотреть на тебя

merelyJunior, так не смотрите. Это легко устроить - уходите отсюда и никогда не возвращайтесь.

логика нулевая

Где? Показать и объяснить сможете? Или это как с "абсолютной чушью" в одном из ваших комментариев выше - очередное бездоказательное утверждение?

какое же ты ничтожное, закомплексованное чмо

Мнения говнокодеров о своей персоне ценю чрезвычайно. Ещё!

Answer 2

[merelyJunior]

let itemInner = $("#itemInner");
        var itemLength = $("#itemInner.row").length;

        $("#addItem").click(function (e) {
            e.preventDefault();
            itemLength++;
            var addedRow = `
                <div class='row '>
                <div class='item-num'>${itemLength}</div>
                <button id='deleteItem'><img src="/img/icons/delete.png"></button>
                </div>
            `;
            itemInner.append(addedRow);

            // Меняем кол-во
            $("#count").text(itemLength);
        });

        itemInner.on("click", "#deleteItem", function (e) {
            e.preventDefault();
            $(this).closest("div").remove();
            itemLength--;

            // Меняем кол-во
            $("#count").text(itemLength);
        });

        // Отслеживаем изменения кол-ва
        $("#count").bind("DOMSubtreeModified",function(){
            // Переписываем нумерацию            
            $(".item-num").each(function(i, elem) {
                $(elem).text(i+1);
            });
        });