javascript - Delete row from table on corresponding delete button click -

i'm facing problem in given example. have list of 3 items, of them have delete button, when click on delete button corresponding row deleted. it's works fine.

now problem if have 3 item in list , want delete first item , click on first delete button removes rows of table.

demo here

there 1 basic flaw in code.

you binding on click button tag, in html there no button tags, there input tags button type.

after creating variable called "id" unnecessary in case. jqquery not need this.

using following line of code takes care of everything. simplify life , make jquery short possible.

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

as far #divgrid being empty false statement div never empty unless remove entire #mytable child element

you can using following condition

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

here solution 3 lines of jquery need.

edit: here fiddle check rows being empty , if empty table replaced text "all items removed"

working fiddle