仅由 js 单击时从数组中删除一项

Question

I am new to JavaScript. I have a small code that creates list from input and then adds it to an array. I am able to remove one item from the DOM when the item is clicked, but I couldn't remove it from the array.

I tried to use array.splice(item, 1)

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

But it removes the entire array sometime, and sometime removes the last item. when I console log the code, it looks like I clicked 3 or 4 times on the list even though I just clicked once. I have no idea what's wrong. this is the entire code:

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

Answer 1

Code is totally meaningless

1)

userInputArr.push(lists)

why you push the same element all the time? As lists refers to the first and the only element with class 'lists'?

2)

userInputArr.splice(item, 1)

please watch carefully what splice does? The first argument is number, but you pass a collection of elements with class 'list'. But i camn not even suggest which element should be removed as it contains the same element as i mentioned in first point

3) You do not need this array at all

So right approach is something like this

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

Answer 2

 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>

Run code & View in full screen.

Answer 3

use shift() userInputArr.shift() you are also getting double clicks because your addNote() function contains an event listener lists.addEventListener and it's executed by another event listner addBtn.addEventListener you should probably move lists.addEventListener out of the addNote function