как удалить элемент со списка

301
22 августа 2018, 15:40

после добавления элементов в список, при клике на какой-то элемент нужно удалить его.

Буду признателен если подскажете как можно это реализовать.

Если я правильно понимаю, у меня одна из главных проблем что removeItem не вызывается, когда элементы добавлены в список

(function() { 
 
  "use strict" 
 
  let List = { 
    items: [], 
    init: function() { 
      this.casheDom(); 
      this.bindEvent(); 
      this.removeItem(); 
    }, 
    casheDom: function() { 
      this.input = document.querySelector(".js-input"); 
      this.button = document.querySelector(".js-btn-add"); 
      this.view = document.querySelector(".js-list-view"); 
      this.listItem = document.querySelectorAll(".item"); 
    }, 
    bindEvent: function() { 
      this.button.addEventListener("click", this.addItem.bind(this)); 
    }, 
    render: function() { 
      this.clearList(); 
      let arr = this.items; 
      for (let i = 0; arr.length > i; i++) { 
        let elem = document.createElement("div"), 
          itemTxt = document.createTextNode(arr[i]); 
        elem.setAttribute("class", "item"); 
        elem.appendChild(itemTxt); 
        this.view.appendChild(elem); 
      } 
      this.listItem = document.querySelectorAll(".item"); 
    }, 
    addItem: function() { 
      this.items.push(this.input.value); 
      this.render(); 
      this.input.value = ''; 
    }, 
    removeItem: function() { 
      let elems = this.listItem; 
      console.log(elems); 
      for (let i = 0; elems.length > i; i++) { 
        elems[i].onclick = function() { 
          //remove item 
        } 
      } 
    }, 
    clearList: function() { 
      let myNode = this.view; 
      while (myNode.firstChild) { 
        myNode.removeChild(myNode.firstChild); 
      } 
    } 
  }; 
 
  window.addEventListener("load", function() { 
    List.init(); 
  }); 
})();
<div class="list"> 
  <input type="text" class="js-input"> 
  <button class="js-btn-add">add</button> 
  <div class="js-list-view"></div> 
</div>

Answer 1

removeItem вызывается только внутри Init. В этот момент this.listItem еще пустой массив, так как нет никаких элементов.

Из-за этого обработчики никуда не навешиваются.

Простым решением вместо removeItem, который бежит по всем элементам, можно сделать removeItem, который добавляет обработчик конкретному элементу:

removeItem: function(elem) {
  elem.onclick = function() {
    console.log(elem);
  }
},

Для удаления можно воспользоваться методом .remove

(function() { 
 
  "use strict" 
 
  let List = { 
    items: [], 
    init: function() { 
      this.casheDom(); 
      this.bindEvent(); 
    }, 
    casheDom: function() { 
      this.input = document.querySelector(".js-input"); 
      this.button = document.querySelector(".js-btn-add"); 
      this.view = document.querySelector(".js-list-view"); 
      this.listItem = document.querySelectorAll(".item"); 
    }, 
    bindEvent: function() { 
      this.button.addEventListener("click", this.addItem.bind(this)); 
    }, 
    render: function() { 
      this.clearList(); 
      let arr = this.items; 
      for (let i = 0; arr.length > i; i++) { 
        let elem = document.createElement("div"), 
          itemTxt = document.createTextNode(arr[i]); 
        elem.setAttribute("class", "item"); 
        elem.appendChild(itemTxt); 
        this.view.appendChild(elem); 
        this.removeItem(elem); 
      } 
      this.listItem = document.querySelectorAll(".item"); 
    }, 
    addItem: function() { 
      this.items.push(this.input.value); 
      this.render(); 
      this.input.value = ''; 
    }, 
    removeItem: function(elem) { 
      elem.onclick = function() { 
        console.log(elem); 
        elem.remove(); 
      } 
    }, 
    clearList: function() { 
      let myNode = this.view; 
      while (myNode.firstChild) { 
        myNode.removeChild(myNode.firstChild); 
      } 
    } 
  }; 
 
  window.addEventListener("load", function() { 
    List.init(); 
  }); 
})();
<div class="list"> 
  <input type="text" class="js-input"> 
  <button class="js-btn-add">add</button> 
  <div class="js-list-view"></div> 
</div>

READ ALSO
Валидация теста с radio кнопками

Валидация теста с radio кнопками

Как сделать правильно валидацию на отмечание да/нет, чтобы если пользователь не отметил один из вариантов ему это сообщилоРазметку страницы...

205
Как перезагрузить страницу

Как перезагрузить страницу

Как сделать перезагрузку страницы на jQuery?

317
Привилегии не записываются в information_schema

Привилегии не записываются в information_schema

Создал нового пользователя:

193
Вытянуть данные из UPDATE в триггер BEFORE UPDATE

Вытянуть данные из UPDATE в триггер BEFORE UPDATE

Возможно ли вытянуть данные из UPDATE, чтобы в триггере ими оперировать?

228