Удалить один элемент из массива при нажатии только js - PullRequest
Новая
       44

Удалить один элемент из массива при нажатии только js

0 голосов
/ 17 июня 2020

Я новичок в JavaScript. У меня есть небольшой код, который создает список из ввода, а затем добавляет его в массив. Я могу удалить один элемент из DOM при щелчке по элементу, но не смог удалить его из массива.

Я пытался использовать array.splice(item, 1)

lists.addEventListener("click", function (e) {
    e.target.closest("li").remove();
    userInputArr.splice(item, 1);});

Но иногда он удаляет весь массив, а иногда удаляет последний элемент. когда я записываю код в консоль, похоже, что я щелкнул 3 или 4 раза по списку, хотя щелкнул только один раз. Понятия не имею, что случилось. это весь код: 

const lists = document.querySelector(".lists");
const userInput = document.querySelector(".add-note");
const addBtn = document.querySelector(".add-btn");
const item = document.querySelectorAll(".list");

userInputArr = [];

function addNote() {
  if (userInput.value < 1) {
    return;
  }
  lists.insertAdjacentHTML(
    "afterbegin",
    `<li class='list'>${userInput.value}</li>`
  );
  userInputArr.push(lists);

  lists.addEventListener("click", function (e) {
    e.target.closest("li").remove();
    userInputArr.splice(item, 1);
  });
  userInput.value = "";
}

addBtn.addEventListener("click", function () {
  addNote();
});

Ответы [ 3 ]

0 голосов
/ 17 июня 2020

Код совершенно бессмыслен

1) 

userInputArr.push(lists)

почему вы sh все время один и тот же элемент? Поскольку списки относятся к первому и единственному элементу с классом "списки"?

2) 

userInputArr.splice(item, 1)

, пожалуйста, внимательно посмотрите, что делает splice? Первый аргумент - число, но вы передаете коллекцию элементов с классом list. Но я даже не предлагаю, какой элемент следует удалить, поскольку он содержит тот же элемент, что я упоминал в первом пункте

3) Вам вообще не нужен этот массив

Так что правильный подход - это что-то вот так 

const lists = document.querySelector(".lists");

// just once create listener, no need to do it each time
lists.addEventListener("click", function (e) {
  // if you want to remove clicked item then
  if (e.target.tagName === 'LI') e.target.remove(); 

  // but if you want to remove the first one then uncomment line
  // if (this.children[0]) this.children[0].remove()
});

const userInput = document.querySelector(".add-note");
const addBtn = document.querySelector(".add-btn");

///////////////////////////////////////////////////
// item is meaninglee here, so delete this line
// const item = document.querySelectorAll(".list");

//////////////////////
// array is useless too, delete this line
// userInputArr = [];

function addNote() {
  // check if it is number
  if (isNaN(userInput.value) || Number(userInput.value < 1)) {
    return;
  }

  lists.insertAdjacentHTML(
    "afterbegin",
    `<li class='list'>${userInput.value}</li>`
  );

  userInput.value = "";
}

addBtn.addEventListener("click", function () {
  addNote();
});
0 голосов
/ 17 июня 2020 

const items = (() => {
  const _items = {};
  let key = 0;

  return {
    put(value) {
      _items[key++] = value;

      console.log("Added", this.all());

      return key - 1;
    },
    remove(key) {
      delete _items[key++];
      console.log("Removed", this.all());
    },
    all(asArray = true) {
      return asArray ? Object.values(_items) : { ..._items
      };
    }
  }
})();

const inputEl = document.querySelector(".input");
const itemsEl = document.querySelector(".items");
const addBtn = document.querySelector(".btn-add");

addBtn.addEventListener("click", () => {
  const value = inputEl.value.trim();

  if (!value.length) return;

  const key = items.put(value);
  const li = document.createElement("li");

  li.textContent = value;
  li.dataset.key = key;

  itemsEl.append(li);

  inputEl.value = "";
});

itemsEl.addEventListener("click", (e) => {
  const li = e.target.closest("li");

  items.remove(li.dataset.key);

  li.remove();
});
<input type="text" class="input">
<button class="btn-add">Add</button>

<ul class="items"></ul>

Выполнить код и просмотреть в полноэкранном режиме.

0 голосов
/ 17 июня 2020

используйте shift() userInputArr.shift(), вы также получаете двойные щелчки, потому что ваша addNote() функция содержит прослушиватель событий lists.addEventListener и выполняется другим списком событий addBtn.addEventListener, вам, вероятно, следует переместить lists.addEventListener из addNote функция

...