Question

我在给定的例子中面临一些问题。我有一个列表中的三个项目，所有这些项目都有一个删除按钮，当我点击删除按钮时，相应的行被删除。它工作正常。

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

演示Here

Answer 1

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

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

工作Fiddle

Answer 2

您的准则中存在一个基本缺陷。

你点击只是按钮标签绑定，但在你的HTML中没有按钮标签，有按钮类型的输入标签。

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

使用以下代码行处理所有事情。因此，简化生活，使jQuery尽可能短。

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

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

您可以使用以下条件

来实现

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

这是solution，你只需要3行jQuery。

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

Working Fiddle

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");
  }
});

背后的逻辑是：

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

Demo

Answer 6

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

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

6 个答案: