Это то, что я делал в прошлом, и это прекрасно работает
Необходимым условием для этого ответа является каждая кнопка и поле ввода должно быть в DIV с уникальным идентификатором, и должен быть контейнер для всех этих div в В моем случае это
.
. На кнопке «Добавить» (если она есть) вам нужен узел клона и вставьте его под или над элементом, на котором он был нажат,
// Create a clone of element with id ddl_1:
let clone = document.querySelector('#row'+rownumber).cloneNode( true );
// Append the newly created element on element p
document.querySelector('p').appendChild( clone );
Затем каждый раз, когда вы добавляете новую строку или удаляете строку, вам нужно добавить идентификаторы в эту строку, чтобы сделать это, вы бы использовали общий класс для всех этих строк в моем случае, который я использовал, строки
function changeids()
{
let rows =document.getElementsByClassName('rows');
for(let i=0; i<rows.length; i++)
{
let thisid="row"+i;
rows[i].setAttribute("id", thisid);
let thisAddButton = rows[i].getElementsByClassName("add")[0];
let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];
let onclickaddfunction = "addrow("+i+")";
thisAddButton.setAttribute("onclick", onclickaddfunction);
let onclickDeletefunction = "removerow("+i+")";
thisDeleteButton.setAttribute("onclick", onclickDeletefunction);
}
}
Затем, когда Вы удалите, вам нужно удалить узел и снова вызвать changeids
function removerow(rownumber){
document.getElementById('row'+rownumber).remove();
changeids();
}
Это даст вам всю рабочую идею добавления и удаления строк, весь код ниже, пожалуйста, игнорируйте мой грязный код, просто сделал это, чтобы дать вам и идею
<p>
<div id="row1" class="rows">
<button class="add" onclick="addrow(1)">add</button>
<button class="delete" onclick="removerow(1)"> remove </button>
<input type="text">
</div>
</p>
<script>
function addrow(rownumber)
{
// Create a clone of element with id ddl_1:
let clone = document.querySelector('#row'+rownumber).cloneNode( true );
// Append the newly created element on element p
document.querySelector('p').appendChild( clone );
changeids();
}
function removerow(rownumber)
{
document.getElementById('row'+rownumber).remove();
changeids();
}
function changeids()
{
let rows =document.getElementsByClassName('rows')
for(let i=0; i<rows.length; i++)
{
let thisid="row"+i;
rows[i].setAttribute("id", thisid);
let thisAddButton = rows[i].getElementsByClassName("add")[0];
let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];
let onclickaddfunction = "addrow("+i+")";
thisAddButton.setAttribute("onclick", onclickaddfunction);
let onclickDeletefunction = "removerow("+i+")";
thisDeleteButton.setAttribute("onclick", onclickDeletefunction);
}
}
</script>