Get data attribute in tr

Question

I am having the following script.

As you can see several rows can be added via a button. The x deletes the rows and triggers the deleteRow function.

 $(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this)) $("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this)) function deleteRow(e) { let deleteBtn = $(e.target).closest(".deleteMe"); deleteBtn.closest('tr').remove() console.log("Deleted post_id with number: ") } function ourClickDispatcher(e) { let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm") let targetButtonParent = targetButton[0].parentElement.parentElement let randNumb = Math.floor(Math.random() * 10) + 1 targetButtonParent.insertAdjacentHTML('afterend', ` <tr> <td></td> <td> <img src="" alt="" height="42" width="42"> <a href="" data-post_id="${randNumb}"> Test ${randNumb} </a> </td> <td class="deleteMe"> <button type="button" class="btn btn-danger btn-sm deleteMe">x</button> </td> </tr> `) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableProd" style="float: left;" class="table table-bordered"> <tbody> <tr> <td>Product 2</td> <td> <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2"> Add Product 2 </button> </td> </tr> <tr> <td>Product 3</td> <td> <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3"> Add Product 3 </button> </td> </tr> <tr> <td>Product 4</td> <td> <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4"> Add Product 4 </td> </tr> </tbody> </table> 

I would like to console.log() - as in the deleteRow() function the post_id , which can be found in the attribute data-post_id like f.ex. the following:

Deleted post_id with number: 1

Any suggestions how to locate the data-post_id from the button I press?

I appreciate your replies!

Answer 1

You can do something like:

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  const postId = deleteBtn.closest('tr').find("a[data-post_id]").data('post_id');
  deleteBtn.closest('tr').remove();
  console.log("Deleted post_id with number: ${postId}")
}

Answer 2

You can also use $(e.target).parent().prev().find("a").attr("data-post_id") to find the attribute value. Here is the working snippet

 $(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this)) $("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this)) function deleteRow(e) { let deleteBtn = $(e.target).closest(".deleteMe"); deleteBtn.closest('tr').remove() var id = $(e.target).parent().prev().find("a").attr("data-post_id") console.log("Deleted post_id with number: "+id) } function ourClickDispatcher(e) { let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm") let targetButtonParent = targetButton[0].parentElement.parentElement let randNumb = Math.floor(Math.random() * 10) + 1 targetButtonParent.insertAdjacentHTML('afterend', ` <tr> <td></td> <td> <img src="" alt="" height="42" width="42"> <a href="" data-post_id="${randNumb}"> Test ${randNumb} </a> </td> <td class="deleteMe"> <button type="button" class="btn btn-danger btn-sm deleteMe">x</button> </td> </tr> `) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableProd" style="float: left;" class="table table-bordered"> <tbody> <tr> <td>Product 2</td> <td> <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2"> Add Product 2 </button> </td> </tr> <tr> <td>Product 3</td> <td> <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3"> Add Product 3 </button> </td> </tr> <tr> <td>Product 4</td> <td> <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4"> Add Product 4 </td> </tr> </tbody> </table>