通过 id 删除带有按钮单击 id 的附加数据

Question

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

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

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

Answer 1

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

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

通过 id 删除带有按钮单击 id 的附加数据

remove appended data with button click id by id

html

javascript

jquery

append

local-storage