如何在JavaScript任务列表中实现禁止添加重复内容功能？

要实现禁止添加已存在的任务，核心是在创建新任务前检查输入内容是否已存在。以下是基于你现有代码的修改方案：

直接基于DOM检查的实现（适合任务数量较少的场景） #

修改后的完整代码：

const input = document.querySelector("input");
const addBtn = document.querySelector(".btn-add");
const ul = document.querySelector("ul");
const empty = document.querySelector(".empty");

addBtn.addEventListener("click", (e) => {
  e.preventDefault(); // 防止作为表单一部分时页面刷新

  const text = input.value.trim(); // 去除输入前后空格
  if (text !== "") {
    // 检查现有任务中是否已存在该内容
    const existingTaskTexts = Array.from(ul.querySelectorAll("p"))
      .map(p => p.textContent.trim());
    
    if (existingTaskTexts.includes(text)) {
      alert("该任务已存在，请输入新内容");
      input.value = "";
      return;
    }

    // 创建并添加新任务
    const li = document.createElement("li");
    li.appendChild(addDeleteBtn());
    const p = document.createElement("p");
    p.textContent = text;
    li.appendChild(p);
    ul.appendChild(li);
    input.value = "";
    empty.style.display = "none";
  } else {
    alert("请输入内容");
  }
});

// 补充delete按钮的实现（原代码中调用了此函数）
function addDeleteBtn() {
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener("click", (e) => {
    const li = e.target.parentElement;
    ul.removeChild(li);
    // 任务为空时恢复显示提示
    if (ul.children.length === 0) {
      empty.style.display = "block";
    }
  });
  return deleteBtn;
}

关键改动说明： #

• 用trim()处理输入和现有任务文本，避免因前后空格导致的重复误判
• 添加重复检查逻辑：通过querySelectorAll获取所有任务的文本内容，转为数组后用includes判断是否已存在
• 移除了原代码中冗余的if (text == text)判断

基于数组缓存的实现（适合任务数量较多的场景） #

如果任务数量较多，每次遍历DOM会影响性能，可以维护一个数组缓存已有的任务文本，检查和删除时直接操作数组：

const input = document.querySelector("input");
const addBtn = document.querySelector(".btn-add");
const ul = document.querySelector("ul");
const empty = document.querySelector(".empty");
const existingTasks = []; // 缓存已有的任务文本

addBtn.addEventListener("click", (e) => {
  e.preventDefault();

  const text = input.value.trim();
  if (text !== "") {
    if (existingTasks.includes(text)) {
      alert("该任务已存在，请输入新内容");
      input.value = "";
      return;
    }

    // 创建并添加新任务
    const li = document.createElement("li");
    li.appendChild(addDeleteBtn(text)); // 传入任务文本用于删除时更新数组
    const p = document.createElement("p");
    p.textContent = text;
    li.appendChild(p);
    ul.appendChild(li);
    existingTasks.push(text); // 添加到缓存数组
    input.value = "";
    empty.style.display = "none";
  } else {
    alert("请输入内容");
  }
});

function addDeleteBtn(taskText) {
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener("click", (e) => {
    const li = e.target.parentElement;
    ul.removeChild(li);
    // 从缓存数组中移除对应任务
    const index = existingTasks.indexOf(taskText);
    if (index !== -1) {
      existingTasks.splice(index, 1);
    }
    // 任务为空时恢复显示提示
    if (ul.children.length === 0) {
      empty.style.display = "block";
    }
  });
  return deleteBtn;
}

优势： #

• 检查重复时无需遍历DOM，直接操作数组，性能更优
• 数组缓存与DOM内容保持同步，确保检查结果准确

内容的提问来源于stack exchange，提问作者karrio