Question

我有一个输入框，你可以输入项目，提交它，然后用它自己的删除按钮创建一个框以将其删除。问题是，在删除多个框之后，然后在输入中输入新内容时，将重新加载已删除的所有先前项目，包括新项目。如何防止重新加载已删除的盒子？

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;
}

Answer 1

您似乎永远不会从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');

Answer 2

您可以更新状态以解决此问题。

这是我的代码：

...

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/

重新加载已删除的列表项

2 个答案: