Блог

У меня есть динамически обновляемый список. Каждый элемент списка имеет текстовый ввод и кнопку удаления. У меня 2 проблемы:

1. когда я удаляю элемент списка, leninputs в cloneLi не изменяется
2. когда я ввожу текстовое значение в первый элемент списка, оно также копируется в новый (я пробовал также elmtInput.reset(), но без изменений)

У вас есть идеи, что не так?

html-код:

 <ul id="sortable">
    <li>
        <div class="row">
            <input type="text" id="item1" name="item1" value="">
            <div>
                <a class="btn" onclick="this.parentElement.parentElement.parentElement.style.display = 'none';"><i class="fas fa-trash"></i></a>
            </div>
        </div>
    </li>
</ul>

<input type="submit" value="New item" class="btn" onclick="cloneLi()">
  

js:

 function cloneLi() {
    leninputs = document.getElementsByTagName("input").length;
    if (leninputs < 5) {
        var ul = document.getElementById("sortable");
        var elmnt = ul.getElementsByTagName("li")[0];
        var cln = elmnt.cloneNode(true);
        document.getElementById("sortable").appendChild(cln);
        var elmtInput = document.getElementsByTagName("input")[leninputs];
        elmtInput.setAttribute("name", "item" (leninputs 1).toString());
        elmtInput.setAttribute("id", "item" (leninputs 1).toString());
        elmtInput.setAttribute("value", "");
    } else {
        alert('Max number of items reached!');
    }
}
  

Вам нужно исключить ввод кнопки из выбора, выбранного с другими элементами ввода, поэтому будьте более точны в выборе, и это сделает ваше условие, чтобы иметь максимум пять входных данных вместо четырех правильных, потому что вы считали ввод с одним плюсом, вам нужно удалить элемент li вместо того, чтобы просто скрывать его, и который сохраняет свой элемент ввода таким, какой он есть, вам нужно изменить значение каждого нового клонированного ввода, чтобы избежать клонирования значения

 var listsContainer = document.querySelector("#sortable");
document.querySelector("#add_item").onclick = function() {
  var inputLen = document.querySelectorAll("#sortable input").length, newList;
  if(inputLen === 5) {
    return alert('Max number of items reached!');
  }
  newList = document.createElement("li");
  newList.innerHTML = `
    <div class="row">
        <input type="text" id="item${  inputLen}" name="item${inputLen}" value="">
        <div>
            <a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
        </div>
    </div>`;
  listsContainer.appendChild(newList);
}  

 ul {
  list-style-type: none;
  margin: 0 0 10px 0;
  padding: 0;
  width: 300px;
}
.row {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 5px;
}
.row div {
  display: inline-block;
}
.row div i {
  font-size: 20px;
  color: white;
  text-shadow: 0 0 5px green;
  cursor: pointer;
}
.row input {
  width: 85%;
  margin-right: 10px;
  border: none;
  border-bottom: 1px solid #777;
}
#add_item {
  display: none;
}
label {
  background-color: #ccc;
  color: white;
  font: bold 24px monospace;
  padding: 5px;
  border-radius: 5px;
  box-shadow: inset 1px 1px 3px #fff;
  cursor: pointer;
}  

 <script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul id="sortable">
    <li>
        <div class="row">
            <input type="text" id="item1" name="item1" value="">
            <div>
                <a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
            <div>
        </div>
    </li>
</ul>

<label for="add_item"><input id="add_item" type="submit" class="btn">New item <i class='far fa-plus-square'></i></label>