How to delete a row from a table

Question

I am creating a responsive data table that adds a row each time I click on a add button that is in the end of the row. And the add button turns into a delete button. Here's the code I made

For 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>

When for adding is clicked:

$("#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 on delete nothing seems to happen. Can anybody help?

Answer 1

Identifiers in HTML must be unique , So create the element using CSS class. then Class Selecctor can be used.

Change script to render HTML as

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

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

Use .on() method with Event Delegation approach while generating elements 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 this :

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

You need to use on method, since your delete button not yet been exists.

Answer 4

Change your script which is dynamically adding the delete button to give the button a class name of btnDelete or something similar.

$("#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 for your delete button is:

$("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 can't have the same id multiple times on the page. That's just a basic rule of HTML. You can only use it once. If you use the same id more than once, only the first time will be counted.

Solution

If you want to be able to target multiple elements, use classes, or target a single parent and grab it's children using element.firstElementChild

---

Problem 2

When you write .click , you are telling the browser to watch for when a user clicks on the element that you are targeting.

However, that element has to exist when the page first loads. That is because the lines of Javascript are only parsed once by the browser. It reads through your code, and if the element you want to click on doesn't exist right then, your code is skipped.

Solution

So what you have to do to address this is to add the event listener, the .click , onto an element which isn't dynamic. Remember that every click event gets passed up the chain, from the inner most element that the user clicked on, to that element's parent, to the next parent, and so on until it reaches the body element. So if you add a .click onto the parent of your list, it'll be attached correctly.

Using jQuery, it would be something like:

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