How to delete a row from a table

Question

I create a flexible data table that adds a row every time I click the add button, which is at the end of the row. And the add button turns into a delete button. Here is the code I made

In the table:

<table id="invoice_table_data"> <tr id="last_row"> <td contenteditable id="item_name"></td> <td contenteditable id="item_code"></td> <td contenteditable id="description"></td> <td> <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button> </td> </tr> </table> 

If to add a click:

 $("#btn_add").click(function() { $("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'+item_name+'</td><td id="item_code'+n+'"> '+item_code+'</td><td id="description'+n+'">'+description+'</td><td><button type="button" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>'); n+=1; 

And my delete function:

 $('#delete_').click( function () { var nb=$(this).data('idx'); $("#last_row"+nb).remove(); }); 

However, when I click the Delete button, nothing happens. Can anyone help?

Answer 1

Identifiers in HTML must be unique . Therefore, create an element using the CSS class. then you can use the Class Selecctor .

Modify the script to make HTML as

 <button type="button" class="delete_">x</button> 

What you are currently using is called a "direct" binding, which will only attach to the element that exists on the page when your code calls the event binding.

Use .on() with Event Delegation when generating items dynamically. So change your code to

 $("#invoice_table_data").on('click', ".delete_", function(){ $(this).closest('tr').remove(); }); 

 var n = 1; $("#btn_add").click(function() { $("#invoice_table_data").append('<tr><td>item_name' + n + '</td><td><button type="button" class="delete_" data-idx="' + n + '">x</button></td></tr>'); n += 1; }); $("#invoice_table_data").on('click', ".delete_", function() { $(this).closest('tr').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="invoice_table_data"> <tr id="last_row"> <td id="item_name"></td> <td> <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button> </td> </tr> </table> 

Answer 2

Use attribute selector and event delegation

 $(document).on('click', "[id^='delete_']", function () { var nb=$(this).data('idx'); $("#last_row"+nb).remove(); }); 

Answer 3

Try the following:

 $('document').on('click', '#delete_', function () { var nb=$(this).data('idx'); $("#last_row"+nb).remove(); }); 

You need to use the method since the delete button does not exist yet.

Answer 4

Modify your script that dynamically adds the delete button to give the button the class name btnDelete or something like that.

 $("#btn_add").click(function() { $("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">' +item_name+'</td><td id="item_code'+n+'"> ' +item_code+'</td><td id="description'+n+'">' +description+'</td><td><button type="button" class="btnDelete" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>'); n+=1; }); 

Then the script button for your removal:

 $("body").on("click", ".btnDelete", function (e) { var rowToDelete = $(this).closest("tr"); rowToDelete.remove(); }); 

http://codepen.io/ailinmcc666/pen/ZBgXBZ

Answer 5

You have two separate problems.

Problem 1

You cannot have the same id multiple times on a page. This is just a basic HTML rule. You can use it only once. If you use the same id more than once, only the first time will be counted.

Decision

If you want to target multiple elements, use classes or specify one parent and capture it with element.firstElementChild

---

Problem 2

When you write .click , you tell the browser to keep track of when the user clicks on the element you are targeting.

However, this element must exist when the page first loads. This is because Javascript strings are only processed by the browser once. It reads your code, and if the element you want to click does not exist directly, your code is skipped.

Decision

So what you need to do to solve this problem is add a .click event .click to an element that is not dynamic. Remember that each click event skips the chain, starting from the innermost element that the user clicked, to that element's parent, next parent, and so on, until it reaches the body element. Therefore, if you add .click to the parent of the list, it will be installed correctly.

Using jQuery, it would be something like this:

 $('#invoice_table_data').on('click', 'button.delete', function(event){ //run code here });