Добавление HTML элементов динамически

Question

Я написал сценарий, который может динамически добавлять HTML-элементы, но проблема здесь есть есть значения для этих элементов, которые также создаются динамически, ниже сценарии

$(document).ready(function(){ 
$("#noOfSegments").change(function(){ 
var counter=$("#noOfSegments").val(); 
for(i=1; i<=counter; i++){ 
var row = $("<tr><td>"+i+"</td><td><input type='text' name='segmentName"+i+"'></input></td><td><select name='dataType"+i+"'><option value='0'>0</option><option value='1'>1</option></select></td><td><select name='dataType"+i+"'><option value='0'>0</option><option value='1'>1</option></select></td><td><input type='checkbox' name='mandatoryFlag"+i+"'></td></tr>"); 
$("#segmentTable").append(row); 
} 
var rowcount = $("#segmentTable tr").length; 
while (rowcount > counter) { 
$("#segmentTable tr:last-child").remove(); 
rowcount = $("#segmentTable tr").length; 
    } 
}); 
}); 

где мои $ (» #noOfSegments ") - это выбор с параметрами 1,2 и 3. Когда я выбираю вариант 3, сначала он дает мне« + i + »как 1,2 и 3, но когда я выбираю первый вариант и вариант 2, он дает me 1, 1 для «+ i +», и если я выбираю вариант 1, а затем вариант 3, он дает мне 1,1,2 Можете ли вы, ребята, помочь мне с этим?

Answer 1

Вы должны $("#segmentTable tr").remove() (все <tr> узлов) перед добавлением новых.

Here's an edited fiddle.

Что происходит с вашим кодом, что вы добавляете X новых узлов в конце таблицы, а затем начать удаление X узлов с конца таблицы, в сущности, удалив некоторые узлы просто добавлены , Вы должны либо удалить узлы из верхней части таблицы, либо удалить все узлы, прежде чем добавлять новые (строка, которую я сделал в своей скрипке).