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» класс и использовать его в селекторе.

Вот рабочий пример из вышеперечисленного.

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

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

Answer 2

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

<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 3

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

вы можете попытаться удалить последние строки jquery или любое конкретное сырье таблицы следующим образом:

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

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

следующее удалит только 2-й ряд

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

Answer 4

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

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

$(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();
    });
});

});

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

Answer 5

Вы должны использовать событие Live вместо клика.

Вы можете добавить это вместо сгенерированного 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 () используется, когда вы сгенерировали материал, и для этого вам нужно выбрать его. Надеюсь, это поможет!