How can I get the ID on click of delete button

Question

I am using the jquery datatable with ajax call to fetch the data. I am trying to add the delete button so whenever the delete button is clicked I can get the ID of clicked row. But yet my code is just picking up the first ID of the row. Here is my code

 <script type="text/javascript">
       
 
    var table = $('#table1').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url : "http://localhost/cokeinventory/rest-api/api-search-stockin.php",
                dataSrc: "doc",
            },
            columns: [
                { data: 'stock_id'},
                { data: 'item_name'},
                { data: 'unit' },
                { data: 'stockin_qty' },
                { data: 'barcode_number' },
                { data: 'barcode_label' },
                { data: 'balquantity' },
                {
                    data: null,
                    className: "dt-center editor-delete",
                    orderable: false,
                    "mRender" : function ( data, type, row ) {
                        return '<button class="btn btn-success" id="deletebtn"  value=' +data.stock_id +' >Delete <i class="fe fe-delete"></i></button>';
                    }
                }

            ],
        });

   $("body").on("click", "#deletebtn", function(){
      var val = $("#deletebtn").val();
        alert(val);
 });

  });

    </script>

You can't create multiple elements with the same `id`. Change `#deletebtn` to use a class instead, then use `$(this).val()` within the event handler. — Rory McCrossan, Aug 19 '22 at 09:52

score 1 · Answer 1 · answered Aug 19 '22 at 09:59

1

Expanding on @Rory his comment. An id has to be unique, so you've to use classes instead.

So first change this line (The important piece here is that I removed the id, and added it in the class list):

return '<button class="btn btn-success deletebtn" value=' +data.stock_id +' >Delete <i class="fe fe-delete"></i></button>';

And next for the jQuery, you've to change it into the following:

$("body").on("click", ".deletebtn", function(){
      var val = $(this).val()
        alert(val);
 });

answered Aug 19 '22 at 09:59

Kevin

1,068
5
14
16

thanks it worked can you tell me what you did? and why you used this approach and what flaw was in my approach – Smitty's Aug 19 '22 at 10:05
The main flaw in your approach was that you used an Id multiple times, which is something you shouldn't do (https://stackoverflow.com/q/14446022/3653544). And in your jQuery you tried to select all your buttons, we check the `this`, `this` is referencing to the button which was clicked, which made it possible to get the value of it. – Kevin Aug 19 '22 at 10:14

score 0 · Answer 2 · answered Aug 19 '22 at 10:57

First, you have to assign a class to the button i.e ".deletebtn"

Why you should assign class selector rather than id for this scenario?

Because “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements. In your case, you have multiple buttons so class is the best approach in your scenario.

After that use $(this).val() to get the clicked button value.

And for jQuery selector. You should use this script.

$("body").on("click", ".deletebtn", function(){
    var value = $(this).val()
    console.log("value is : " + value);
    // some logic here
});

score 0 · Answer 3 · answered Aug 19 '22 at 11:21

0

Use class instead of id as given below:

$(document).on("click", ".deletebtn", function(){
      var val = $(this).val();
      alert(val);
});

answered Aug 19 '22 at 11:21

Sushant Yadav

121
5

How can I get the ID on click of delete button

3 Answers3