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

标签 javascript jquery arrays object state

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

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>

最佳答案

您可以创建一个函数,如下所示:

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

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

关于javascript - 如何从对象内部的数组中删除特定元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41133095/

相关文章:

javascript - 使用 jquery 只获取直接元素值

c# - 允许用户在 Windows 控制台中键入任意数量的字符串,然后显示有关已键入的字符串中的字母数和行号的信息

arrays - .map 数组到字符串

javascript - 使用 Howler.js 时有没有办法指示音频下载进度/缓冲区?

javascript - 如何沿着多边形移动对象

javascript - 从 Django 服务器连接到远程 socket.io 服务器

javascript - setTimeOut 代码不适用于 jQuery

javascript - 如何让这个按钮来重置这个 react 组件中的计时器?

javascript - 使用 $(document).ready() 将 js 分解为文件,但保持范围

php - 来自 SQL 的多维 PHP 数组,用于 json_encode