javascript 如何用js动态更新div编号

chhkpiq4 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(123)

我有一个输入，通过onclick函数，新的输入通过innerhtml添加，但是当我删除一个对象时，它就从列表中消失了。如何操作请帮助

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.log(div)
        profile.appendChild(div);
        console.log(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.log(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的顺序进行

JavaScript

来源：https://stackoverflow.com/questions/75505952/how-to-dynamically-update-div-numbering-with-js

1条答案

按热度按时间

cyvaqqii1#

如果你委托和克隆你会有一个更容易的时间
注意我是如何隐藏第一个减号的

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>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 如何用js动态更新div编号

1条答案

相关问题

热门标签

最新问答