localStorage不删除父元素

我想删除附加的父元素，但当我尝试删除它不起作用。localStorage不删除父元素

这里是我的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

来源

2016-01-11 Norx

要求不明确。你可以添加一个例子吗？ – nikhil

虽然为我工作 –

希望你想要什么？ –

看this solution你的小提琴。

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

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

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

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

来源

2016-01-11 13:49:43 AlexBay

男人这个工作就像一个魅力！谢谢！ – Norx

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

您的删除按钮侦听器根本不会执行任何操作。现在，它创建一个名为parent的localStorage中的全新项目，然后立即删除它。

你需要做两件事情：

从DOM中删除的父元素。加入项目时parent.remove();
在localStorage更新您的list项目包含新名单的HTML，就像你做......你可以做到这一点使用jQuery remove方法
```
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; 
});

来源

2016-01-11 13:39:05 apsillers

其实我不明白如何更新列表？ – Norx

@BurakErman我已经包含了代码文字代码来做到这一点在答案的最后。你不明白哪一部分？ – apsillers

伙计非常感谢你。解决它！ – Norx

首先，localStorage中的每个值都强制为一个字符串，因此它可以将HTML存储为文本，但不能将其存储为实际的DOMElement对象 - 如果您尝试这样做，则最终会得到类似于"[object HTMLBodyElement]"

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

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

从更高的层次，你需要使用0123的理由- 如果您想在同一页面生存期中持久地引用您的变量，您应该只在该事件处理程序的范围之外定义一个变量并将信息存储在那里。如果您希望在页面视图之间进行持久参考，这无法工作 - 页面刷新时该元素将被销毁，并且在同一个域中打开的其他标签的上下文中将永远不会存在。

来源

2016-01-11 13:50:47

做到这一点，创建一个数组对象并控制这个对象，然后封装方法来轻松控制。请参见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(); 
     }); 

    }

来源

2016-01-11 13:51:03 RBoschini

localStorage不删除父元素

回答

相关问题