Question

如何在jQuery上删除带有ID的行？任何人都可以进一步帮助。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Anthony" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<title>No titel 1</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
    var plant_row = 0;$('#add').click(function() {
    html  = '<tr id="plant' + plant_row + '">';
        html += '<td><input type="text" name="aquarium_planten[' + plant_row + '][plant_naam]" /></td>';
        html += '<td>';
        html += '<a href="#" id="remove_' + plant_row + '" >Verwijderen</a>';
        html += '</td>';
    html += '</tr>';

    $('#planten table > tbody').append(html);

    plant_row++;        

    return false;
    });
});
</script>
<div id="planten">
  <table class="table">
   <thead>
     <tr>
        <th>Naam plant</th>
        <th>&nbsp;</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
     <tr>
        <td><button id="add" >Add</button>
        </td>
        <th>&nbsp;</th>
     </tr>
  </tfoot>
</table></div></body></html>

我很遗憾无论我怎么做。对不起，我的英语不好所以我想删除包含表格ID的行

Answer 1

我建议多点jQuery＆＃39; ish并创建可以引用的实际元素并直接添加事件处理程序

$(document).ready(function() {
    $('#add').on('click', function(e) {
        e.preventDefault();

        var plant_row = $(this).data('plant_row') || 0,
            tr        = $('<tr />', {id: 'plant' + plant_row}),
            td1       = $('<td />'),
            td2       = $('<td />'),
            input     = $('<input />', {
                type: 'text', 
                name: 'aquarium_planten[' + plant_row + '][plant_naam]'
            }),
            anchor    = $('<a />', {
                href: '#',
                id  : 'remove_' + plant_row,
                text: 'Verwijderen',
                on  : {
                    click: function() {
                        $(this).closest('tr').remove();
                    }
                }
            });

        $('#planten table > tbody').append(
            tr.append(
                td1.append(input), 
                td2.append(anchor)
            )
        );

        $(this).data('plant_row', ++plant_row);
    });
});

FIDDLE

Answer 2

您需要在动态添加行时使用事件委派：

$('#planten').on('click', 'a[id^="remove"]', function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

Here's a fiddle

Answer 3

试试这个：

$("#planten").on("click","a[id^='remove_']",function(e){
      e.preventDefault();
      $(this).parents("tr").remove();
});

Answer 4

您有'remove_" + plant_row + "'所以plant_row拥有您想要的ID。

相反，做这样的事情：

html += '<a href="#" data-id="' + plant_row + ' class='remove'">Verwijderen</a>';

然后点击，你可以这样做：

$('.remove').click(function(){
    var id = $(this).data('id');

    $('#plant'+id).remove();
});

如何删除带有id的行

4 个答案:

Here's a fiddle