重新加载已删除的列表项目

我有一个输入框，您可以输入项目，提交项目并使用自己的删除按钮创建一个框以将其删除。问题是，在删除多个框后，然后在输入中输入新内容后，所有以前删除的项目都会重新加载，包括新项目。如何防止重新装入已移除的盒子？重新加载已删除的列表项目

Fiddle（Stacksnippets不允许提交）

这是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Shopping List Example</title> 
<link rel="stylesheet" type="text/css" href="css-list.css"> 
</head> 
<div id="centerPanel"> 
<form class="my-list-form">  

    <input type="text" class="input" name="add-input" id="add-input">  

    <button class="add-button" id="submitBtn">Add</button> 
</form> 
<ul class="my-list-ul"></ul> 
</div> 

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script src="js-list.js"></script> 
</html>

JS：

var state = {items:[]}; 
var addItem = function(state, item) 
{ 
state.items.push(item); 
} 
var displayItem = function(state, element){ 
var htmlItems = state.items.map(function(item){ 
    return '<li class="box">' + item + '</br><button class="divBtns"  id="deleteBtn">Delete</button>' + '</li>'; 
}); 
element.html(htmlItems); 
} 
//After deleting items, this button again loads all items that have been created since 
//the page loaded up, including the new item. 
//Needs to be fixed to not reload the deleted items 
$('.my-list-form').submit(function(event){ 
event.preventDefault(); 
addItem(state, $('.input').val()); 
displayItem(state, $('.my-list-ul')); 
/* alert(state.items[1]);   shows that the items array holds everything that is turned into a div*/ 
}) 

$(document).ready(function(e){    
$('ul').on('click', '#deleteBtn', function(event){ 
    var rmvButton = $(this).closest('li'); 
    rmvButton.remove(); 
}); 
})

CSS：

* { 
font-family: sans-serif; 
font-weight: normal; 
} 
#centerPanel { 
margin-left: 50px; 
margin-top: 50px; 
padding-left: 10px; 

} 
h1 { 
font-size: 34px; 

} 
.font-size { 
font-size: 17px; 
} 
#add-input { 
height:25px; 
width: 190px; 
font-size: 16px; 
} 
button { 
font-size: 17px; 
} 
#submitBtn { 
height: 30px; 
width: 85px; 
} 
.divBtns { 
margin-top: 10px; 
} 
.box { 
border: 1px solid black; 
border-color: grey; 
width: 153px; 
height: 65px; 
padding: 20px; 
font-style: italic; 
font-size: 22px; 
margin-bottom:10px; 
margin-right: 10px; 
} 
ul { 
list-style-type: none; 
margin-left:-40px; 
color: grey; 
} 
li { 
float: left; 
}

来源

2016-12-14 Maria S

除了从您创建的，您也需要到''＃deleteBtn'改变为一类像我在的jsfiddle做了数组删除我为你创造 – mplungjan

看样子你NEVE r删除state对象中的任何内容，每次运行addItem()时都会添加该对象。

你会需要一种方法来从这个数组中删除一个特定的项目，可能通过获取li的索引中删除，并做

state.items.splice(index, 1);

商店指数上的按钮数据属性：

var displayItem = function(state, element){ 
    var i = 0; 
    var htmlItems = state.items.map(function(item){ 
     return '<li class="box">' + item + '</br><button class="divBtns" ' + 
      'id="deleteBtn" data-index="' + (i++) + '">Delete</button>' + '</li>'; 
    }); 
    element.html(htmlItems); 
}

然后你就可以得到它的点击回调

var index = $(this).data('index');

来源

2016-12-14 09:18:30 AndFisher

我刚刚做到了！ :-) – AndFisher

或'var rmvButton = $（this）.closest（'li'），idx = rmvButton.index（）' – mplungjan

假设没有其他操作正在生成的列表和用户单击删除按钮之间的DOM，是。 – AndFisher

你可以更新状态来解决这个问题。

这是我的代码：

... 

var deleteItem = function(state, itemId) { 
    var index = 0; 
    var isFind = state.items.some(function(item, i) { 
    if (item.id == itemId) { 
     index = i; 
     return true; 
    } else { 
     return false; 
    } 
    }); 

    if (isFind) { 
    state.items.splice(index, 1); 
    } 
} 

... 

$(document).ready(function(e){    
    $('ul').on('click', '#deleteBtn', function(event){ 
     ... 

     // update state 
     deleteItem(state, $(this).parent().data('id')); 
    }); 
})

https://jsfiddle.net/q483cLp9/

来源

2016-12-14 09:49:10 JSing

重新加载已删除的列表项目

回答

相关问题