如何删除最后一个 <li> 子节点及其本地存储?
How to remove last <li> child together with it's local storage?
我正在做一个待办事项列表,我想添加、删除和清除任务及其本地存储。 Add 和 clear 工作,但我未能使 remove 工作。
我尝试使用 element.lastChild 但删除它没有用。
var last = document.getElementById("list").lastChild.innerHTML;
这是我的代码
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var last = listItems[listItems.length - 1];
last.parentNode.removeChild(last);
removeStore(last);
}
// localStorage
function store() {
window.localStorage.myToDoList = list.innerHTML;
}
function clearStore() {
localStorage.clear();
}
function removeStore(item) {
localStorage.removeItem(item);
}
删除仅适用于删除任务,但我在第一次单击删除按钮后收到错误消息
"TypeError: last.parentNode is null"
在最后一个之后:
TypeError: document.getElementById(...).lastChild 为 null
只有当您的待办事项列表中有条目时,您的 last
才可用。最初,在清除待办事项列表中的所有项目后,remove()
函数中的 last
将是 undefined
,因为您的列表是空的。
为避免此错误,请有条件地检查待办事项列表中是否存在条目。
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var last = listItems[listItems.length - 1];
if (last) {
last.parentNode.removeChild(last);
}
... rest of your code
}
从列表中删除项目后,使用列表的当前元素设置本地存储。这将使用列表中的当前项更新您的本地存储。
if (last) {
last.parentNode.removeChild(last);
window.localStorage.myToDoList = document.getElementById("list").innerHTML; // or call your store(); function
}
希望这对您有所帮助:)
您可以用我的部分替换您的 javascript 部分代码。改动的部分用大写注释,并说明改动的目的。
var add = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var what = document.getElementById('what').value;
var li = document.createElement('li');
if (what.length > 0) {
li.appendChild(document.createTextNode(what));
list.appendChild(li);
store()
//document.getElementById('what').placeholder = "What do I have to do?";
} else {
li.appendChild(document.createTextNode("Task number " + (listItems.length + 1)));
list.appendChild(li);
store();
}
}
// I HAVE TO CHANGE THE LOGIC OF THIS FUNCTION COMPLETELY
// THIS FUNCTION TAKES VALUE FROM LOCAL STORAGE, CHECKS FOR EXISISTENCE OF
// LAST li ELEMENT HTML AND IF FIND IT, THEN REMOVE IT FROM LOCAL STORAGE VALUE
// AND SET NEW VALUE BACK IN LOCAL STORAGE
function rem() {
//var a = document.getElementById("list").lastChild.innerHTML;
//localStorage.last = a;
var aValue = localStorage.getItem("myToDoList");
console.log(aValue);
var listItems = document.getElementById("list").getElementsByTagName("li");
console.log(listItems);
if (listItems.length > 0) {
var last = listItems[listItems.length - 1];
if (last) {
var lastHtml = last.outerHTML;
console.log(lastHtml);
var indexAtWhichLastElementPresent = aValue.indexOf(lastHtml);
if (indexAtWhichLastElementPresent > -1) {
// Removes the lastElementHtml part from local storage value
aValue = aValue.substring(0, indexAtWhichLastElementPresent) + aValue.substring(indexAtWhichLastElementPresent + lastHtml.length);
}
}
}
localStorage.setItem("myToDoList", aValue);
}
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
console.log(listItems);
var last = listItems[listItems.length - 1];
rem(); // CHANGED THE CALLING ORDER. FIRST REMOVE DATA FROM LOCAL STORAGE AND THEN ELEMENT WILL BE REMOVED
last.parentNode.removeChild(last);
// TAKE OUT THE REMOVE FUNCTION FROM INSIDE OF THIS FUNCTION SO THAT IT CAN
// BE USED BY SOME OTHER FUNCTION IN FUTURE
if (listItems.length === 0){
alert();
}
}
var clearAll = function(){
var myNode = document.getElementById("list");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
clearStore();
}
alert();
}
// localStorage
function store() {
window.localStorage.myToDoList = list.innerHTML;
}
function clearStore() {
localStorage.clear();
}
/*function removeStore(item) {
localStorage.removeItem(item);
}*/
function getValues() {
var storedValues = window.localStorage.myToDoList;
if(!storedValues) {
list.innerHTML = '';
}
else {
list.innerHTML = storedValues;
}
}
getValues();
//modal box
var modal = document.getElementById("myModal");
//button that opens the modal
var btn = document.getElementById("myBtn");
//<span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
//open the modal
function alert() {
modal.style.display = "block";
}
//clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
//clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
如果您在实施此解决方案时遇到任何问题,请发表评论。
我正在做一个待办事项列表,我想添加、删除和清除任务及其本地存储。 Add 和 clear 工作,但我未能使 remove 工作。
我尝试使用 element.lastChild 但删除它没有用。
var last = document.getElementById("list").lastChild.innerHTML;
这是我的代码
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var last = listItems[listItems.length - 1];
last.parentNode.removeChild(last);
removeStore(last);
}
// localStorage
function store() {
window.localStorage.myToDoList = list.innerHTML;
}
function clearStore() {
localStorage.clear();
}
function removeStore(item) {
localStorage.removeItem(item);
}
删除仅适用于删除任务,但我在第一次单击删除按钮后收到错误消息 "TypeError: last.parentNode is null" 在最后一个之后: TypeError: document.getElementById(...).lastChild 为 null
只有当您的待办事项列表中有条目时,您的 last
才可用。最初,在清除待办事项列表中的所有项目后,remove()
函数中的 last
将是 undefined
,因为您的列表是空的。
为避免此错误,请有条件地检查待办事项列表中是否存在条目。
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var last = listItems[listItems.length - 1];
if (last) {
last.parentNode.removeChild(last);
}
... rest of your code
}
从列表中删除项目后,使用列表的当前元素设置本地存储。这将使用列表中的当前项更新您的本地存储。
if (last) {
last.parentNode.removeChild(last);
window.localStorage.myToDoList = document.getElementById("list").innerHTML; // or call your store(); function
}
希望这对您有所帮助:)
您可以用我的部分替换您的 javascript 部分代码。改动的部分用大写注释,并说明改动的目的。
var add = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
var what = document.getElementById('what').value;
var li = document.createElement('li');
if (what.length > 0) {
li.appendChild(document.createTextNode(what));
list.appendChild(li);
store()
//document.getElementById('what').placeholder = "What do I have to do?";
} else {
li.appendChild(document.createTextNode("Task number " + (listItems.length + 1)));
list.appendChild(li);
store();
}
}
// I HAVE TO CHANGE THE LOGIC OF THIS FUNCTION COMPLETELY
// THIS FUNCTION TAKES VALUE FROM LOCAL STORAGE, CHECKS FOR EXISISTENCE OF
// LAST li ELEMENT HTML AND IF FIND IT, THEN REMOVE IT FROM LOCAL STORAGE VALUE
// AND SET NEW VALUE BACK IN LOCAL STORAGE
function rem() {
//var a = document.getElementById("list").lastChild.innerHTML;
//localStorage.last = a;
var aValue = localStorage.getItem("myToDoList");
console.log(aValue);
var listItems = document.getElementById("list").getElementsByTagName("li");
console.log(listItems);
if (listItems.length > 0) {
var last = listItems[listItems.length - 1];
if (last) {
var lastHtml = last.outerHTML;
console.log(lastHtml);
var indexAtWhichLastElementPresent = aValue.indexOf(lastHtml);
if (indexAtWhichLastElementPresent > -1) {
// Removes the lastElementHtml part from local storage value
aValue = aValue.substring(0, indexAtWhichLastElementPresent) + aValue.substring(indexAtWhichLastElementPresent + lastHtml.length);
}
}
}
localStorage.setItem("myToDoList", aValue);
}
var remove = function(){
var listItems = document.getElementById("list").getElementsByTagName("li");
console.log(listItems);
var last = listItems[listItems.length - 1];
rem(); // CHANGED THE CALLING ORDER. FIRST REMOVE DATA FROM LOCAL STORAGE AND THEN ELEMENT WILL BE REMOVED
last.parentNode.removeChild(last);
// TAKE OUT THE REMOVE FUNCTION FROM INSIDE OF THIS FUNCTION SO THAT IT CAN
// BE USED BY SOME OTHER FUNCTION IN FUTURE
if (listItems.length === 0){
alert();
}
}
var clearAll = function(){
var myNode = document.getElementById("list");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
clearStore();
}
alert();
}
// localStorage
function store() {
window.localStorage.myToDoList = list.innerHTML;
}
function clearStore() {
localStorage.clear();
}
/*function removeStore(item) {
localStorage.removeItem(item);
}*/
function getValues() {
var storedValues = window.localStorage.myToDoList;
if(!storedValues) {
list.innerHTML = '';
}
else {
list.innerHTML = storedValues;
}
}
getValues();
//modal box
var modal = document.getElementById("myModal");
//button that opens the modal
var btn = document.getElementById("myBtn");
//<span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
//open the modal
function alert() {
modal.style.display = "block";
}
//clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
//clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
如果您在实施此解决方案时遇到任何问题,请发表评论。