问题1

Question

我正在创建一个响应式数据表，每次单击行末尾的添加按钮时都会添加一行。添加按钮变为删除按钮。这是我制作的代码

表格：

<table id="invoice_table_data">
<tr id="last_row">
        <td contenteditable id="item_name"></td>
        <td contenteditable id="item_code"></td>
        <td contenteditable id="description"></td>
        <td>
            <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button>
        </td>
    </tr>
</table>

点击添加时：

$("#btn_add").click(function() {
$("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'+item_name+'</td><td id="item_code'+n+'"> '+item_code+'</td><td id="description'+n+'">'+description+'</td><td><button type="button" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>');
n+=1;

我的删除功能：

$('#delete_').click( function () {
var nb=$(this).data('idx');
$("#last_row"+nb).remove();
});

然而，当我点击删除似乎没有发生任何事情。有人可以帮忙吗？

Answer 1

HTML中的标识符必须是唯一的，因此请使用CSS类创建元素。然后可以使用Class Selecctor。

更改脚本以将 HTML 呈现为

<button type="button" class="delete_">x</button>

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素的同时，使用.on()方法和Event Delegation方法。 所以将代码更改为

$("#invoice_table_data").on('click', ".delete_", function(){
    $(this).closest('tr').remove();
});

＆＃13;

var n = 1;
$("#btn_add").click(function() {
  $("#invoice_table_data").append('<tr><td>item_name' + n + '</td><td><button type="button"  class="delete_" data-idx="' + n + '">x</button></td></tr>');
  n += 1;
});

$("#invoice_table_data").on('click', ".delete_", function() {
  $(this).closest('tr').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="invoice_table_data">
  <tr id="last_row">
    <td id="item_name"></td>
    <td>
      <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

使用attribute selector和event delegation

$(document).on('click', "[id^='delete_']", function () {
  var nb=$(this).data('idx');
   $("#last_row"+nb).remove();
});

Answer 3

试试这个：

$('document').on('click', '#delete_', function () {
    var nb=$(this).data('idx');
    $("#last_row"+nb).remove();
 });

您需要使用on方法，因为您的删除按钮尚未存在。

Answer 4

更改动态添加删除按钮的脚本，为按钮提供btnDelete或类似名称的类名。

$("#btn_add").click(function() {
$("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'
+item_name+'</td><td id="item_code'+n+'"> '
+item_code+'</td><td id="description'+n+'">'
+description+'</td><td><button type="button" class="btnDelete" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>');
n+=1;
});

然后删除按钮的脚本是：

$("body").on("click", ".btnDelete", function (e) {
var rowToDelete = $(this).closest("tr");
rowToDelete.remove();
});

http://codepen.io/ailinmcc666/pen/ZBgXBZ

Answer 5

你有两个不同的问题。

问题1

您不能在页面上多次使用id次。这只是HTML的基本规则。你只能使用一次。如果您多次使用相同的id，则只会计算第一次。

<强>解决方案

如果您希望能够定位多个元素，使用类或定位单个父元素并使用element.firstElementChild

抓住它的子元素

问题2

当您撰写.click时，您告诉浏览器要注意用户何时点击您要定位的元素。

但是，首次加载页面时必须存在该元素。这是因为Javascript的行只能由浏览器解析一次。它会读取您的代码，如果您要点击的元素当时不存在，则会跳过您的代码。

<强>解决方案

因此，要解决此问题，需要将事件侦听器.click添加到非动态元素上。请记住，每个click事件都会向上传递，从用户单击的最内层元素，到该元素的父元素，再到下一个父元素，依此类推，直到它到达body元素。因此，如果您将.click添加到列表的父级，则会正确附加。

使用jQuery，它将类似于：

$('#invoice_table_data').on('click', 'button.delete', function(event){
    //run code here
});

如何从表中删除行

5 个答案:

问题1

问题2