私は買い物リストの演習を通じてアプリケーションの状態を管理する方法を学んでいます。私はこの機能を使用stateを変更するにはオブジェクトの内部にある配列から特定の要素を削除するにはどうすればよいですか？

var state = { 
    items: [] 
};

：

イベントリスナーを経由して、後に呼ばれ

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>

出典

2016-12-14 Santiago Pliego

の値によってインデックスを決定することができます方法indexOfは、Internet Explorer 7および8でサポートされていないことを

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

注意を。

出典

2016-12-14 01:05:12 Andy

をループさせることができて？それはほぼ2017です！ lol、とにかくpolyfillはここにありますhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill –

@Andy、これは素晴らしいです！ありがとうございました。 –

：

はここで最終的なソリューションのデモです。あなたは次のように関数を作成することができます項目

state.items.splice(indexOfItemToRemove, 1);

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

出典

2016-12-14 01:04:09 superblygeneralobject

配列から要素を削除するには、いくつかの方法があります。

shift最初から最初の項目が削除されます

pop最後から最後の項目が削除されます。

splice

は、新しい配列を返すとは対照的に、あなたが（彼らは、「インプレース」作業）所望の位置にこれらのすべては、元の配列を変更します

注要素を削除することができます。

出典

2016-12-14 01:07:40

あなたは確かに私たちは、IE 7と8右を行くアイテム

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

出典

2016-12-14 01:08:19 tit

オブジェクトの内部にある配列から特定の要素を削除するにはどうすればよいですか？

HTML

答えて

関連する問題