Question

我有一个使用DOM动态构建的表。它有10个cols，在每一行我都有一些数据，我可以从websocket，文本框和提交按钮中获取每行来添加数据库。

我提交后如何删除一行？有人提到jQuery，但无法弄清楚如何做到这一点。

修改

我正在使用Chrome，但下面的所有脚本都有问题。这就是我如何解决它：而不是$('input')我使用jQuery('input')所有脚本都正常工作。谢谢你的帮助。

Answer 1

尝试这样的事情......

$('input').click(function() {
    $(this).closest('td').remove();
});

演示：http://jsfiddle.net/wdm954/32W63/

编辑：

这是另一种方法......

$('table form').submit(function() {
    // run some ajax here to do your database work
    $(this).closest('td').remove();
});

Answer 2

你可以这样做：

$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
   var buttonHnd = $(this);
   $.post("your-php-file.php", 
     {/* the data you want to post e.g. */ name: $("#name").val()},
     function(data){
      buttonHnd.parent().parent().remove();
     }
   );
});
});

Answer 3

你可以使用jquery'remove从dom中删除它......

http://api.jquery.com/remove/

Answer 4

var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);

您可能也对我的AJAXFetch jQuery插件感兴趣。除此之外，它还允许您将表的一行视为表单，并使用AJAX将其中的所有表单元素提交到其中，并使用服务器的结果（通常是非表单版本）将其交换到行中。我在许多内部应用程序中使用它来进行数据的就地编辑。

Answer 5

您可以尝试以下方式：

// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();

来源：JQuery HowTo

从DOM构建表中删除一行

5 个答案: