javascript - 单击相应的删除按钮从表中删除行

Question

在给定的示例中，我遇到了一些问题。我有一个包含三个项目的列表，它们都有一个删除按钮，当我单击删除按钮时，相应的行被删除。它工作正常。

现在我的问题是，如果我在列表中有所有三个项目，并且我只想删除第一个项目，然后单击第一个删除按钮，它会删除表中的所有行。

演示Here

Answer 1

那是因为你的第一个 id 是 0 所以它删除所有元素，删除 if 条件并阻止它工作正常，如果你想删除整个表然后添加其他按钮。

$('input[type=button]').click(function () {
    $(this).closest("tr").remove();
});

工作小提琴

Answer 2

您的代码中有一个基本缺陷。

您在单击时仅绑定到按钮标签，但在您的 HTML 中没有按钮标签，有按钮类型的输入标签。

在此之后，您将创建一个名为“id”的变量，在这种情况下这是不必要的。使用 jQquery 你不需要这个。

使用以下代码行可以解决所有问题。因此，简化生活并使 jQuery 尽可能短。

$(this).parent().parent().remove();

至于你#divGrid为空是一个错误的陈述，因为除非你删除整个#myTable子元素，否则div永远不会为空

您可以通过使用以下条件来做到这一点

if( $('#divGrid ').is(':empty') ) {
   $('#divGrid').html("All item removed");
}

这是您真正需要的仅包含 3 行 jQuery的解决方案。

编辑：这是一个检查行是否为空的小提琴，如果为空，则表格将替换为文本“所有项目已删除”

工作小提琴

Answer 3

尝试这个

$(':button').click(function() {  
    $(this).closest("tr").remove();
});

演示 http://jsfiddle.net/BLV2g/14/

为了更安全，按钮不会在其他地方删除

$('#myTable :button').click(function() {  
    $(this).closest("tr").remove();
});

Answer 4

尝试这个，

function delSpec(rl)
  {    
     r=document.getElementById("insSpecc").rows.length;
     if(r!=2){
       document.getElementById("insSpecc").deleteRow(r-1)
     }
  }

演示http://jsfiddle.net/nKkhW/111/

Answer 5

我想这就是你想要做的：

$('#myTable :button').click(function () {
  $(this).parent().parent().remove();
  var rowCount = $('#myTable tr').length;
  if (rowCount == 1) {
    $('#divGrid').empty();
    $('#divGrid').html("All item removed");
  }
});

背后的逻辑是：

1. 每当单击输入类型按钮时，都会触发 jquery 事件。
2. 删除按钮所在的 tr 内容。
3. 检查除标题行外是否还有行，如果只有标题行，则替换标题。

演示

Answer 6

由于第一个删除按钮 id 是del0，它将转到 else 子句并删除所有三行。