Я изучаю, как управлять состоянием приложения через упражнение списка покупок. За инструкциями, у меня есть массив внутри объекта, где хранятся все детали я добавляю:Как удалить определенный элемент из массива, который находится внутри объекта?

var state = { 
    items: [] 
};

Чтобы изменить state Я использую эту функцию:

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

, который называется позже с помощью прослушивателя событий (и добавляют к DOM через renderList, здесь не показано):

$('#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

Вы можете создать функцию следующим образом:

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

Обратите внимание, что метод indexOf не поддерживается в Internet Explorer 7 и 8 .

источник

2016-12-14 01:05:12 Andy

Конечно, мы можем отпустить IE 7 и 8 не так ли? это почти 2017! lol, anyways 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

Вы можете цикл по элементам

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

ответ

Смежные вопросы