як видалити елемент зі списку
після додавання елементів до списку, при натисканні на якийсь елемент потрібно видалити його. Буду вдячний, якщо підкажете як можна це реалізувати. Якщо я правильно розумію, у мене одна з головних проблем, що removeItem не викликається, коли елементи додані до списку
(function() < "use strict" let List = < items: [], init: function() < this.casheDom(); this.bindEvent(); this.removeItem(); >, casheDom: function() < this.input = document.querySelector(".js-input"); document.querySelector(".js-btn-add"); this.view = document.querySelector(".js-list-view"); 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++) = document.createTextNode(arr[i]); elem.setAttribute("class", "item"); elem.appendChild(itemTxt); this.view.appendChild(elem); >this.listItem = document.querySelectorAll(".item"); );this.render(); removeItem: function() < let elems = this.listItem; console.log(elems); for (let i = 0; elems.length > i; i++) item >> >, clearList: function() < let myNode = this.view; while (myNode.firstChild) < myNode.removeChild(myNode.firstChild); >> >; window.addEventListener("load", function() < List.init(); >); >)();
Оператор delete
Оператор delete видаляє властивість об'єкта. Після видалення ця властивість матиме значення undefined.
Синтаксис
приклад
Створимо об'єкт і видалимо з нього одну з властивостей:
Результат виконання коду:
приклад
Давайте створимо масив і видалимо з нього елемент:
Результат виконання коду:
Дивіться також
- методи push і unshift
які додають елементи в масив
- метод splice ,
який також відрізає частини масиву, змінюючи при цьому сам масив
- оператор in ,
який перевіряє чи є властивість об'єкта або масиву
delete
Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since July 2015 .
Анотація
Оператор delete видаляє властивість об'єкта.
| Оператор |
| Реалізований у: |
JavaScript 1.2 |
| Версія ECMAScript: |
ECMA-262 1-ий випуск |
Синтаксис
де результат обчислення вирази має бути посиланням на властивість (об'єкта), наприклад:
delete object.property delete object['property'] delete object[index] delete property // видаляє властивості глобального об'єкта, або // використовуючи інструкцію with, властивості об'єкта, на який посилається інструкція
Якщо результат обчислення вирази не є властивістю (об'єкта), delete нічого не робить.
Параметри
Ім'я об'єкта чи вираз, результатом обчислення якого є об'єкт.
Ціле число, що є індексом масиву, який повинен бути видалений.
Значення, що повертається
Повертає false, лише якщо властивість існує у самому об'єкті, а не в його прототипах, і не може бути видалено. В інших випадках повертає true.
Опис
Якщо оператор delete успішно видаляє, він повністю видаляє властивість з об'єкта. Однак, якщо властивість з таким самим ім'ям існує в ланцюжку прототипів, об'єкт успадкує цю властивість з прототипу.
delete ефективний лише стосовно властивостей об'єктів. Він не впливає на імена змінних та функцій. Присвоєння значення властивості без вказівки об'єкта (без оператора var) іноді неправильно характеризується як глобальна змінна (наприклад x = 5 ). Насправді відбувається присвоєння значення якості глобального об'єкта.
delete не може видалити певні властивості вбудованих об'єктів (таких як Object, Array, Math тощо). У специфікації ECMA-262 вони позначені як DontDelete.
x = 42; // Створює властивість x у глобальному об'єкті var y = 43; // Оголошує нову змінну, y myobj = <>; myobj.h = 4; // створює властивість h myobj myobj.k = 5; // Створює властивість k в myobj delete x; // Повертає true (x - властивість глобального об'єкта і може бути видалено) delete y; // Повертає false (delete не впливає на імена змінних) delete Math.PI; // повертає false (delete не впливає певні вбудовані властивості) delete myobj.h; // повертає true (властивості, визначені користувачем, можуть бути видалені) with (myobj) < delete k; // повертає true (еквівалентно delete myobj.k) > delete myobj; // повертає true (myobj це властивість глобального об'єкта, не змінна, тому може бути видалено)
Якщо об'єкт успадковує властивість від прототипу і не має власності з таким же ім'ям, властивість не може бути видалена при зверненні через цей об'єкт. Однак можна видалити цю властивість безпосередньо в прототипі.
функція Foo() <> Foo.prototype.bar = 42; var foo = New Foo (); delete foo.bar; // повертає true, але безрезультатно, оскільки bar - успадковане властивість alert(foo.bar); // виводить 42, властивість досі успадковується delete Foo.prototype.bar; // видаляє властивість із прототипу alert(foo.bar); // виводить "undefined", властивість більше не успадковується
Видалення елементів масиву
Коли за допомогою оператора delete видаляється елемент масиву, довжина масиву не змінюється. Наприклад, якщо ви видалите a[3] , a[4] як і раніше a[4] , а a[3] не визначено. Так буде навіть якщо ви видалите останній елемент масиву (delete a [a.length-1]).
Коли оператор delete видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі, trees[3] видаляється за допомогою delete.
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees [3]; console.log(3 in trees); // false
Якщо ви хочете, щоб елемент масиву існував, але мав значення undefined, використовуйте undefined замість оператора delete . У наступному прикладі, trees[3] набуває значення undefined, але елемент масиву все ще існує:
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; console.log(3 in trees); // true
Проблема кросбраузерності
Незважаючи на те, що стандарт ECMAScript залишає порядок ітерації за властивостями об'єктів на розсуд реалізуючої сторони, може виявитися так, що всі основні браузери підтримують порядок ітерації, заснований на принципі "властивість додана до об'єкта раніше йде раніше" (принаймні для властивостей, що не знаходяться) у прототипі). Однак, у випадку з Internet Explorer, коли хтось використовує delete з якоюсь властивістю, це призводить до деяких несподіваних результатів, змушуючи інші браузери відмовитися від використання простих об'єктів, таких як літерали об'єктів, як асоціативні масиви. В Internet Explorer, коли значення властивості встановлено в undefined, після видалення цієї властивості, якщо хтось пізніше додасть властивість з таким же ім'ям, воно опиниться у своїй старій позиції, а не в кінці ітераційної послідовності, як очікується.
Тому, якщо ви хочете симулювати впорядкований асоціативний масив у кросбраузерному середовищі, вам доведеться або використовувати два окремі масиви (один для ключів і один для значень), або побудувати масив з об'єктів з однією властивістю і так далі.
Зовнішні посилання