使用按钮单击 id 按 id 删除附加数据答案

【问题标题】：remove appended data with button click id by id使用按钮单击 id 按 id 删除附加数据
【发布时间】：2021-04-28 09:23:15
【问题描述】：

我附加了一个动态按钮，当我点击按钮时，相关数据将被删除

async function DataShow()
{
for (i = 0; i < localStorage.length; i++)
     {
      x = localStorage.key(i);
      if (x !='debugbar-time-new' && x !='debugbar-time' && x!='__mycart')
      {
        item = await JSON.parse(localStorage.getItem(x))
        $("#table_data").append('<tr> <td>'+item['_id']+'</td> <td>'+item['title']+'</td><td><button class="btn btn-primary remove" value="'+item['_id']+'">remove</button></td></tr>')
      }
    }
}

有我的删除功能

$( "#table_data" ).on('click','.remove',function(){
var item_id = $('#table_data button').val()
window.localStorage.removeItem(item_id);
  });

问题是当我单击按钮时，按钮总是获取最后一个元素 id 我还通过检查元素看到所有按钮都有自己的 id 我也尝试$('this').val()，但它不起作用

【问题讨论】：

标签： javascript html jquery append local-storage

【解决方案1】：

您可以在事件处理程序中使用this 关键字来引用引发事件的元素。在您的情况下，您可以使用它来获取 value 属性：

$("#table_data").on('click', '.remove', function() {
  var item_id = this.value;
  window.localStorage.removeItem(item_id);
});

【讨论】：