HTML

Question

我正在学习如何通过购物清单练习来管理应用程序状态。根据说明，我在一个对象中有一个数组，我存储了我添加的任何项目：

var state = {
    items: []
};

修改state我使用此功能：

var addItem = function(state, item) {
state.items.push(item);
};

稍后通过事件监听器调用（并通过renderList添加到DOM，此处未显示）：

$('#js-shopping-list-form').submit(function(event){
    event.preventDefault();
    addItem(state, $('#shopping-list-entry').val());
    renderList(state, $('.shopping-list'));
});

如何从state对象中的数组中删除特定项？基本上我想在用户点击<button class="shopping-item-delete">时反转上面的序列。

以下是最终解决方案的演示：https://thinkful-ed.github.io/shopping-list-solution/

HTML

<body>

  <div class="container">

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
    <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="app.js"></script>
</body>

Answer 1

您可以按如下方式创建一个函数：

var deleteItem = function(state, item) {
    var index = state.items.indexOf(item);
    if (index > -1) {
        state.items.splice(index, 1);
    }
};

请注意，Internet Explorer 7和8不支持方法indexOf。

Answer 2

如果您知道可以使用的项目的索引。您可以按项目

的值确定索引

state.items.splice(indexOfItemToRemove, 1);

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Answer 3

有几种方法可以从数组中删除元素：

shift将从头开始删除第一项

pop将从结尾删除最后一项。

splice允许您删除所需位置的元素

请注意，所有这些都将修改原始数组（它们可以工作＆＃34;就地＆＃34;），而不是返回一个新数组。

Answer 4

您可以循环播放项目

var removeItem = function(state, item) {
  for(var i = state.items.length - 1; i >= 0; i--) {
    if(state.items[i] === item) {
       state.items.splice(i, 1);
       break;
    }
  }
};

如何从对象内部的数组中删除特定元素？

HTML

4 个答案: