Как динамически обновлять нумерацию div с помощью js

У меня есть инпут, в котором через функцию onclick добавляются новые инпуты через innerhtml, но когда я удаляю 1 объект, он уходит из списка. Как это сделать помогите пожалуйста

var x = 0;
function addInputIIN() {
    
    if (x < 4 ){
        var profile = document.getElementById('formDriverInputs');
        var div = document.createElement('div');
        idX = 'driverIdInput' + [x + 1]
        NameX = 'driverNameInput' + [x  + 1]
        div.id = 'inputDriverBlock' + ++x;
        const numDriver = x + 1
        div.innerHTML = '<div class = "inputContainer d-flex align-items-start"><div class = "input-group-    prepend"><div class = "input-group-text">'+numDriver+'</div></div><input type = "text" class = "form-control form__iin mb-3 position-relative" id='+ idX +' name='+ NameX +'  aria-describedby = "driver" placeholder = "Введите иин"  ><img src = "https://w7.pngwing.com/pngs/185/104/png-transparent-emblem-icon-icons-matt-minus-symbol.png" alt = "" class = "form__img-add" alt = "" onclick = "delInputIIN()">  <a href = ""> </div>';
        console.info(div)
        profile.appendChild(div);
        console.info(x)
        
        
    }else{
        var toastBody = document.querySelector('.toast-body')
        toastBody.innerHTML = 'Не может быть больше 5 водителей на 1 машину'
        BsAlert.show();
        
    }
    
    
}
function delInputIIN() {
    var inputs = document.querySelectorAll('.inputIcon')
    var div = document.getElementById('input' + x);
    var parent = event.target.parentNode.parentNode
    parent.remove();
    --x
    console.info(x)

}

.form__img-add{
    width:32px;
}

<div class = "form-group  text-start" id = "formDriverInputs">
<div id = "inputDriverBlock0">
  <div class = "inputContainer">
     <div class = "input-group-prepend">
        <div class = "input-group-text">1</div>                           
                <input type = "text" id = "driverIdInput0" name = "driverNameInput0"placeholder = "Введите иин" '>                   <img src = "https://image.emojipng.com/610/1872610.jpg" alt = "" class = "form__img-add"  onclick = "addInputIIN()">
                                             
                                               
        </div>
  </div>
 </div>
 </div>

Как сделать так, чтобы при удалении вся нумерация шла по порядку от 1 до 5

Почему бы просто не использовать упорядоченный список и заставить браузер сделать это за вас?

— 20.02.2023 07:38

@RobbyCornelissen Вы имеете в виду использование <li>?

— 20.02.2023 07:45

@RobbyCornelissen Ребята вы лучшие, я 2 часа сидел и думал как это сделать на js, а оказывается это вообще несложно. Спасибо

— 20.02.2023 07:55

javascript html css sass

20.02.2023 07:35

Laravel с Turbo JS

Turbo - это библиотека JavaScript для упрощения создания быстрых и высокоинтерактивных веб-приложений. Она работает с помощью техники под названием...

Слишком много useState? Давайте useReducer!

Современный фронтенд похож на старую добрую веб-разработку, но с одной загвоздкой: страница в браузере так же сложна, как и бэкенд.

Типы данных JavaScript

В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...

CSS Flex: что должен знать каждый разработчик

CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...

Введение в раздел "Заголовок" в HTML

Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...

Как React Helmet спасает меня при разделении файлов CSS?

Многие новички могут столкнуться с проблемой, когда одна страница с CSS наследует свойства от другой страницы с другим CSS. У меня было много проблем,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы делегируете и клонируете, вам намного легче

Обратите внимание, как я прячу первый минус

window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("formDriverInputs");
  const toastBody = document.querySelector(".toast-body")
  const tmp = document.getElementById("tmp")
  const maxEntries = 5;
  const renum = () => {
    container.querySelectorAll(".input-group-text").forEach((txt,i) => txt.textContent = (i+1));
  }  
  const addContent = () => {
    container.append(tmp.content.cloneNode(true));
    renum();
  }  
  container.addEventListener("click", (e) => {
    const tgt = e.target;
    if (tgt.matches(".form__img-remove")) {
      tgt.closest(".inputDriverBlock").remove();
      renum();
      return;
    }
    if (tgt.matches(".form__img-add")) {
      if (container.children.length === maxEntries) {
        toastBody.innerHTML = 'Не может быть больше 5 водителей на 1 машину'
        //  BsAlert.show(); // I do not have that plugin
        return;
      }
      addContent();
    }
  });
  addContent(); // add the first
});

.form__img-add {
  width: 32px;
  height: 22px;
}
.form__img-remove {
  height: 22px;
}
#formDriverInputs > div:nth-child(1) .form__img-remove { display: none }

<div class = "form-group text-start" id = "formDriverInputs"></div>
<div class = "toast-body"></div>
<template id = "tmp">
<div class = "inputDriverBlock">
  <div class = "inputContainer d-flex align-items-start">
    <div class = "input-group-prepend">
      <div class = "input-group-text"></div>
      <input type = "text" class = "form-control form__iin mb-3 position-relative"  name = "" aria-describedby = "driver" placeholder = "Введите иин" />  <img src = "https://image.emojipng.com/610/1872610.jpg" alt = "" class = "form__img-add">
      <img src = "https://w7.pngwing.com/pngs/185/104/png-transparent-emblem-icon-icons-matt-minus-symbol.png" alt = "" class = "form__img-remove" />
      <a href = ""></a>
    </div>
  </div>
</div>
</template>

20.02.2023 07:58

Другие вопросы по теме

Где спецификация CSS, в которой говорится, что «!important» имеет приоритет над стилями встроенных элементов?

Я передаю переменную javascript в php, используя сообщение метода fetch API, но в файле php я получаю сообщение об ошибке: неопределенный ключ массива «данные». Как это исправить?

Angular: получить правильное значение ширины элемента div при изменении ширины браузера.

Код CSS для левой границы Div с маркерами для каждого содержимого

Отключить вложенные теги в html с помощью javascript

HTML-анимация с эффектом блеска

Почему я не могу отобразить график d3?

Добавьте наложенный текст на видео html5 с помощью Javascript

Попытка проверить пустое значение во входных данных

Почему для работы этого стиля списка выбора требуется селектор CSS :invalid?

Как динамически обновлять нумерацию div с помощью js

Ответы 1

Другие вопросы по теме

Похожие вопросы