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

问题描述 投票:0回答:3

我是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();
});
javascript arrays removechild
3个回答
0
投票

代码完全没有意义

1)

userInputArr.push(lists)

为什么您总是要推送相同的元素?因为列表是指类“ lists”的第一个也是唯一的元素?

2)

userInputArr.splice(item, 1)

请仔细观察什么接头?第一个参数是数字,但是您传递了一个带有“列表”类的元素的集合。但是我甚至都没有建议应该删除哪个元素,因为它包含与我在第一点中提到的元素相同的元素

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
投票

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>

运行代码并全屏查看。


-1
投票

使用shift()userInputArr.shift()您还会得到双击,因为addNote()函数包含一个事件侦听器lists.addEventListener,并且它是由另一个事件列表器addBtn.addEventListener执行的,因此您可能应该移动lists.addEventListener功能之外的addNote

© www.soinside.com 2019 - 2024. All rights reserved.