javascript - 获取 tr 中的数据属性

Question

我有以下脚本。

如您所见，可以通过一个按钮添加几行。 x 删除行并触发 deleteRow 函数。

$(".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>

我想 console.log() - 如 deleteRow() 函数中的 post_id，可以在属性 data-post_id 像 f.ex。以下内容:

已删除编号为 1 的 post_id

关于如何从我按下的按钮中找到 data-post_id 有什么建议吗？

感谢您的回复!

Answer 1

你可以这样做:

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