Question

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

Javascript代码：

var service = {
removeRow:function(id){ 
        /* alert(id) == [object HTMLTableRowElement]*/
        $("#"+id).remove();
   }
}

控制台错误：

错误：语法错误，无法识别的表达式：＃[object HTMLTableRowElement]

我想删除表格行，请帮助。

Answer 1

您传递标识符而不是字符串。

因此，可怕的IE4主义以某种方式使其成为HTML，导致每个具有id的元素创建具有相同ID的全局JS变量，这样就为您提供了<tr>元素。

当您"#"+id将HTML Element对象转换为字符串[object HTMLTableRowElement]

时

在您传递的ID周围加上引号。

service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')

Answer 2

当您在HTML中使用ID时，需要引用ID：

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

或者更好的是，不要内联你的事件处理程序并在JS中完成所有操作：

$('#fieldList a').on('click', function (e) {
    $(this).closest('tr').remove();
});

有neater html的副作用：

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a href="#"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a href="#"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

Answer 3

您可以通过引用父tr来简化代码，而不是直接引用，而是使用jQuery closest从子td开始。

HTML：

    <td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>

    </td>

代码：

var service = {
removeRow:function(el){ 
        $(el).closest('tr').remove();
   }
}

通过这种方式，您可以避免对其ID进行硬编码。

演示：http://jsfiddle.net/IrvinDominin/keLnN/

Answer 4

如果要删除行，按钮在哪里，更好的方法是使用“this”，而不是对行的ID进行硬编码，因为如果ID不同，则需要更改函数。

将所有a-tags设置为：

<a onclick="service.removeRow(this);" href="javascript:void(0);">

然后，函数将是：

var service = {
removeRow:function(td){ 
        $(td).closest("tr").remove();
   }
}

Answer 5

像这样改变标记......

onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');

希望它能解决！

Answer 6

试试这个：

$('"#'+id+'"').remove();

Answer 7

Create <a> tags like below

    <a class="removeRow" href="javascript:void(0);">

then in Jquery

$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});

Answer 8

您需要从其父节点中删除子项，因此这是一个小例子

<!DOCTYPE html>
<html>
<body>

<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>

<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1"); 

child.parentNode.removeChild(child);
</script>

</body>
</html>

其实这里我有一个id为table1的表，你可以看到...... 在脚本中我定义了一个名为child的变量... 现在在最后一行child.parentNode.removeChild(child); child是我们之前定义的变量的名称...之后parentNode将搜索其子表的父节点，然后是{{ 1}}将删除removeCHILD ...

希望你理解！感谢

使用jQuery删除

8 个答案: