remove appended data with button click id by id

I append a dynamic button and want when I click button Related data will be remove

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

there is my remove functionality

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

Problem is when I click button Button always fetch last element id
I also see with inspect element all button have it’s own id
I also try $('this').val() but it not working

16 thoughts on “remove appended data with button click id by id”

  1. I was curious if you ever thought of changing the layout of your blog?
    Its very well written; I love what youve got to say. But maybe
    you could a little more in the way of content so people could
    connect with it better. Youve got an awful lot of text for only having 1 or
    2 images. Maybe you could space it out better? http://droga5.net/

    Reply

Leave a Comment