如何删除数组的某个项目？

Question

数组中有 5 个项目（其中包含对象），它通过根据数组长度在文档中创建一些元素来直观地表示。 像这样：

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for(let i = 0; i < array.length; i++) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove">( Remove )</span>
  `
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove();
  }) 
})

function remove() {
  // Now how to remove the specific item from the array?
  
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.Remove {
  cursor: pointer;
  height: fit-content;
}

现在我想通过单击第 4 个删除按钮来删除数组中值为“NOT”的第 4 个元素，但我该怎么做。
（您的代码应该适用于所有元素。） 我们将不胜感激。谢谢。

Answer 1

简单来说，添加一个id 或某种标识符并以这种方式使用它。

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for (let i = 0; i < array.length; i++) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
  `;
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove(elem.dataset.id);
  })
})

function remove(id) {
  // Now how to remove the specific item from the array?
  console.log(id);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}

上面的代码现在将获取数据集。使用它，删除 id 的元素并重新渲染视图。

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

function renderElement(array) {
  // creating it visually by creating elements.
  for (let i = 0; i < array.length; i++) {
    const div = document.createElement("div");
    div.classList.add("DIV");
    div.innerHTML = `
      <span class="Text">${array[i].value}</span>
      <span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
    `;
    document.body.appendChild(div);
  }
  document.querySelectorAll(".Remove").forEach(elem => {
    elem.addEventListener("click", () => {
      remove(elem.dataset.id);
    })
  });
}

renderElement(array);

function remove(id) {
  // Now how to remove the specific item from the array?
  // Remove the `elem-` from id.
  array.splice(+id.replace("elem-", ""), 1);
  document.querySelectorAll("body > .DIV").forEach(elem => {
    elem.remove();
  });
  renderElement(array);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}