Delete one row from DOM built table

I have a t开发者_开发知识库able that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.

How can i remove a row after i submitted it?

Someone mentioned jQuery but can't figure it out how to do that.

EDIT

I'm using Chrome and had problems with all the scripts below. this is how i resolved it: instead of $('input') I used jQuery('input') all the scripts are working fine. thank you for your help.

Try something like this...

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

Demo: http://jsfiddle.net/wdm954/32W63/

EDIT:

Here is another way to do this...

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

You can do like this:

$(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();
     }
   );
});
});

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

You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.

You could try something like:

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

Source: JQuery HowTo

you can use jquery' remove to remove it from dom...

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