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

Answer 2

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}")
}