Question

我正在尝试删除附加的父元素，但是当我尝试删除它时不起作用。

这是我的JavaScript代码：

// append
$("#button").click(function(){
    var userList = $('#textarea').val();
    $('#textarea').val('');
    $('#list').append('<p>' + '&#10148;' + userList + '<input type="submit" value="x" id="delete"/></p>');

    var list=$("#list").html();
    localStorage.setItem('list', list);
    return false;

});

// display `list` on page load
if(localStorage.getItem('list')) {
    $('#list').html(localStorage.getItem('list'));
}

// when `delete` button is clicked, remove parent of that delete button
$('body').on('click', '#delete', function() {
    var parent= $(this).parent();
    localStorage.setItem('parent', parent);
    window.localStorage.removeItem('parent');
    return false;
});

Jsfıddle Here

Answer 1

向你的小提琴看this solution。

它使用特定密钥将每个新项目分别插入localStorage。

localStorage.setItem('list_' + itemcount, newitem);

这样您以后可以直接删除所需的内容。

我将id更改为class，因为id是唯一的，并为每个项目添加了唯一ID。

Answer 2

首先，id值应该是唯一的。将您的id="delete"更改为class="delete"，将#delete更改为.delete。

您的删除按钮监听器根本不做任何事情。现在，它在localStorage中创建了一个名为parent的全新项目，然后立即将其删除。

你需要做两件事：

从DOM中删除父元素。您可以使用jQuery remove方法执行此操作：parent.remove();
更新list中的localStorage项以包含新列表的HTML，就像添加项目时一样：
```
var list = $("#list").html();
localStorage.setItem('list', list);
```

所以，把所有这些点放在一起，你得到：

$('body').on('click', '.delete', function() {
  var parent= $(this).parent();
  var list=$("#list").html();
  localStorage.setItem('list', list);
  return false;
});

Answer 3

首先，localStorage中的每个值都被强制转换为字符串，因此它可以将HTML存储为文本而不是实际的DOMElement对象 - 如果你试图这样做，你最终会得到一个值比如-e num

来源：https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

键可以是字符串或整数，但值始终是字符串

从更高层次来看，您需要证明使用"[object HTMLBodyElement]"是合理的 - 如果您希望在同一页面生命周期中对变量进行持久性引用，则应该只在事件处理程序之外调整变量的范围并存储那里的信息。如果您希望跨页面视图进行持久性引用，则此操作永远不会起作用 - 在刷新页面时该元素将被销毁，并且在打开到同一域的其他选项卡的上下文中它将永远不会存在。

Answer 4

制作这个，创建一个数组对象并控制这个对象，然后封装方法以便于控制。请参阅fiddler中的示例。

    var listArr = [];

  if(localStorage.getItem('list')!=null){
    eval('listArr =' + localStorage.getItem('list'));
    tableRender();
  }

  $("#button").click(function(){
      var userList = $('#textarea').val();
      listArr.push(userList);
      localStorage.setItem('list', JSON.stringify(listArr));
      $('#textarea').val('');
      tableRender();
  });

  function tableRender(){
    $('#list').empty();
    $.each(listArr, function(idx, obj){
      $('#list').append('<p>' + '&#10148;' + obj + '<input type="submit" value="x" data-idx="'+ idx +'" class="delete"/></p>');
    });

     $('.delete').bind('click', function() {
        var idxRemove= $(this).attr('data-idx');
        listArr.splice(idxRemove, 1);
        localStorage.setItem('list', JSON.stringify(listArr));
        tableRender();
      });

  }

localStorage不会删除父元素

4 个答案: