jQuery добавить и удалить динамически

Question

У меня есть эта часть кода. Я хочу удалить строки, созданные с помощью кнопки «Добавить линию» с помощью кнопки «X» из каждой созданной строки. Любые идеи? Спасибо!

<script type="text/javascript"> 
$(function() { 
    $("#AddLine").click(function() { 
     var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button>X</button></td></tr>"; 
     $("#table").append(row); 
    }); 
}); 
</script> 

<button id="AddLine">Add Line</button> 
    <table border="1px" id="table"> 
     <tr> 
      <td>First Name</td> 
      <td>Last Name</td> 
      <td>Email</td> 
     </tr> 
     <tr> 
      <td><input type=text /></td> 
      <td><input type=text /></td> 
      <td><input type=text /></td> 
     </tr> 
    </table> 

Answer 1

Если вы используете JQuery 1.7+, то вы можете использовать метод on:

$("#table").on("click", "button", function() { 
    $(this).closest("tr").remove(); 
}); 

Заметим, что это предполагает только элементы типа button у вас есть в вашей таблице используются для удаления строк. Если это не так, вы, вероятно, захотите, чтобы кнопки «X» получили класс и использовали его в селекторе.

Вот working example из вышеперечисленного.

Если вы не используете JQuery 1.7+ вы можете использовать метод delegate вместо:

$("#table").delegate("button", "click", function() { 
    $(this).closest("tr").remove(); 
}); 

Answer 2

вы можете использовать .closest("tr").remove(); из JQuery

вы можете попробовать удалить последние строки JQuery или какого-либо конкретного сырца таблица, как следовать

следующий будет удалить только последний сырой

$('#table tr:last').remove(); 

Далее будет удалить только второй сырой

$('#table tr:eq(1)').remove(); 

Answer 3

Вы должны использовать прямую трансляцию вместо мыши.

Вы можете добавить это вместо того, чтобы ваш генерируемой HTML

<a class="remove" href="#">X</a> 

Затем вы можете сделать

$("remove").live("click", function(){ 
    "find your row. Could be $(this).parents("tr") which searchs your parent until it hits tr and then remove it by using .remove()" 
    return false; 
}); 

Live() используется, когда вы сгенерировали вещи, и для этого вам нужно выбрать тот. Надеюсь, это поможет!

Answer 4

Назначьте идентификатор каждой строке и добавьте кнопку, которая удаляет строку с этим идентификатором при щелчке.

<script type="text/javascript"> 
var rowIndex=0; 
$(function() { 
    $("#AddLine").click(function() { 
     rowIndex++; 
     var row = "<tr id='row_"+rowIndex+"'><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button onclick="removeRow('"+rowIndex+"')">X</button></td></tr>"; 
     $("#table").append(row); 
    }); 
}); 
function removeRow(index){ 
    $('#row_'+rowIndex).remove(); 
} 
</script> 

Answer 5

вы должны добавить событие, нажмите на кнопку X, которую вы создаете с тем же идентификатором, что строка для идентификации Wich строки, которую вы хотите удалить.

Что-то вроде:

$(function() { 
$("#AddLine").click(function() { 
    var row = "<tr id="row_33"><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button id="button_33">X</button></td></tr>"; 

    $("#table").append(row); 

    $("#button_33").click(function() { 
      $("#row_33").remove(); 
    }); 
}); 

});

Вы должны добавить также процесс назначения этих идентификаторов ...