删除 JS 中的元素

Posted 2023-03-11

技术标签:

【中文标题】删除 JS 中的元素【英文标题】：Delete element in JS 【发布时间】：2021-12-11 20:45:43 【问题描述】：

我正在尝试为待办事项列表制作一个网站原型，以使用 javascript 尝试新事物。

function task() 
  //Create checkbox
  var x = document.createElement("INPUT");
  x.setAttribute("type", "checkbox");

  //Create <br>
  lineBreak = document.createElement("br");

  //Create <p> element
  var todo = document.createElement("p");

  //Insert in <p> the text in the input box
  todo.innerText = document.getElementById("task").value;

  //Create the <p>checkbox+text</p><br> on every botton click
  return document.body.appendChild(x) + document.body.appendChild(todo) + document.body.appendChild(lineBreak);

  document.querySelector('#reset').addEventListener('click', () => 
    document.getElementById('reset').clicked
  );


//Show Reset button on task generated
document.querySelector('#go').addEventListener('click', () => 
  document.getElementById("reset").style.visibility = "visible";
);

p 
  display: inline;


img 
  width: 30px;
  display: inline;


#reset 
  visibility: hidden;

<h1>To-Do List</h1>
<input type="text" placeholder="Write a Task" id="task"><button id="go" onclick="task()">GO</button>
<hr>

<body>
  <section>
    <button id="reset">RESET</button>
  </section>
</body>

正如您从代码和指示的 if 语句中看到的那样，我能够为每次单击 go 按钮（在 html 中定义）生成新的<p></p>。它成功生成了一个复选框，旁边是在文本框中键入的文本，然后用<br> 换行。

我试图消除按重置按钮生成的元素，但尽管尝试了多种解决方案，但似乎唯一可行的方法是删除正文的所有内容。

您能否提出一个解决方案以使其正常工作？

【问题讨论】：

document.getElementById('reset').clicked 将始终返回 undefined。我没有看到你在任何地方设置它。可证明您打算附加一个点击处理程序？我想清除通过单击重置按钮生成的所有

元素。重置按钮在html中是这样定义的：

您是否尝试过像我上面建议的那样附加点击处理程序？我认为很明显，当您单击按钮时，您正在尝试删除 HTML 元素？我好像没看懂，这是作品codepen.io/honeygrim/pen/eYEvgQb的codepen@ 您从未发送过运行代码的链接。你甚至读过我发布的文章吗？ *** 中的一个例子更容易处理。我会将您的外部链接移至您的问题，以便其他人可以尝试提供帮助。我自己已经在一个问题上花费了太多时间。 【参考方案1】：

只需通过以下步骤对您的 javascript 代码进行调整，它应该可以按您的预期工作：

修复代码的步骤：

第 1 步： AddEventListener 应在返回之前调用，以便在单击 Go 按钮执行 task() 时调用它。

第 2 步：首先，从之前添加的元素中删除 className“go-element”（如果存在）。

第 3 步：将“go-element”类添加到新添加的元素中，以便在重置它们时轻松识别它们。

第 4 步：在重置点击时，它应该删除所有具有“go-element”类的元素

注意：如果您只想删除通过 Go 按钮添加的所有元素，只需跳过第 2 步。此外，为了简化，您可以将所有元素包装在 div 元素中，然后按照上面显示的所有步骤使用 div 而不是元素。

function task() 
  // Step 2: removing go-element class from previously added elements
  const elements = document.getElementsByClassName("go-element");
  while(elements.length > 0) 
    elements[0].classList.remove("go-element");
  

  // Step 3: add the class name to new elements
  //Create checkbox
  var x = document.createElement("INPUT");
  x.setAttribute("type", "checkbox");
  x.classList.add("go-element"); //         step 3
  //Create <br>
  lineBreak = document.createElement("br");
  lineBreak.classList.add("go-element"); // step 3
  //Create <p> element
  var todo = document.createElement("p");
  todo.classList.add("go-element"); //      step 3
  //Insert in <p> the text in the input box
  todo.innerText = document.getElementById("task").value;

  // Step 1: moved this code before return so it will execute
  document.querySelector('#reset').addEventListener('click', () =>   
    // Step 4: removing elements with class name "go-element" 
    const elements = document.getElementsByClassName("go-element");
    while (elements.length > 0) 
      elements[0].parentNode.removeChild(elements[0]);
    
  );

  //Create the <p>checkbox+text</p><br> on every botton click
  return document.body.appendChild(x) + document.body.appendChild(todo) + document.body.appendChild(lineBreak);


//Show Reset button on task generated
document.querySelector('#go').addEventListener('click', () => 
  document.getElementById("reset").style.visibility = "visible";
);

【讨论】：

谢谢它有效。你能告诉我为什么它与“go-element”变量一起工作，即使它没有在任何地方声明吗？如果我尝试用“go”来更改它，它只会删除短语而不是复选框。它只是一个类，用于识别当用户按下 go 按钮时添加了哪些元素。在 CSS 中，即使未声明类，您也可以使用它，除非您打算使用该类来定义元素的样式。对于复选框问题，检查我是否添加了 todo.classList.add("go-element");对于所有元素。如果将其更改为“go”，则必须将所有元素的“go-element”更改为“go”。否则，它不会删除带有“go”的元素，因为它在 step4 中检查“go-element”以删除元素。【参考方案2】：

您在原始代码中遇到的主要问题是您试图在task 函数中的return 语句之后创建eventListener。将 return 语句放在最后将允许您按预期添加事件侦听器，但我建议将事件侦听器移到任务函数之外仅调用一次。

我在下面的代码中所做的大多数其他更改都是优先更改，但我将列出一些有助于您解决此问题的内容。

在#reset 元素的事件监听器中，您想要清除任务。有几种方法可以做到这一点，但其中大多数涉及修改插入的元素以确保您只删除您打算删除的元素。您已经在使用段落 <p> 标记，因此这是将复选框和任务项文本包装在一起的绝佳选择（您也可以使用列表项 <li> 标记并将整个列表包装在无序列表中 @ 987654327@ 或有序列表<ol> 标签）。

将任务添加到列表后的示例：

<p><input type="checkbox" />task item</p>

至于处理重置，您希望将整个列表包装在一个容器元素中，例如代码中的section 元素。这将涉及将重置按钮移出，以便我们不会将其从 DOM 中移除：

<button id="reset">RESET</button>
<section id="tasklist"></section>

现在，当调用重置事件处理程序时，您可以使用.innerHTML = "" 清除列表。

此外，我从 HTML 中的 GO 按钮中删除了 onclick 属性，并将其添加到 JavaScript 中的事件处理程序中。

<button class="hidden" id="reset">RESET</button>

goButton.addEventListener("click", () => 
  resetButton.classList.remove("hidden");
  task();
);

我还添加了一些有用的功能，例如创建一次必要的元素并使用 Node.cloneNode() 进行克隆、设置对脚本中所需静态元素的引用以及创建具有复选框唯一 ID 的标签，以便选择text 将选中复选框（有助于辅助功能）。

// Set up references to all static elements to reduce DOM calls
const taskInput = document.getElementById("task");
const resetButton = document.getElementById("reset");
const goButton = document.getElementById("go");
const taskList = document.getElementById("tasklist");

// Create instances of elements to clone with Node.cloneNode()
const checkboxInput = document.createElement("input");
const taskLabel = document.createElement("label");
const lineBreak = document.createElement("br");
const paragraph = document.createElement("p");

// Set any attributes needed
checkboxInput.setAttribute("type", "checkbox");

// Keep track of our unique ids
var count = 0;

function task() 
  /** Get the value of count (increment after) and return as
    * a 2-digit string padded with leading zeroes */
  const id = `todo-$String(count++).padStart(2, "0")`;
  // Create checkbox
  var x = checkboxInput.cloneNode();
  x.id = id;
  x.addEventListener("change", function(event) 
    event.target.parentElement.remove();
  );

  // Create label for the task
  var label = taskLabel.cloneNode();
  label.innerText = taskInput.value;
  label.setAttribute("for", id);

  // Create <p> element
  var todo = paragraph.cloneNode();
  todo.appendChild(x);
  todo.appendChild(label);

  // Create the <p><label>checkbox</label>text</p> on every button click
  taskList.appendChild(todo);


// Show Reset button on task generated
goButton.addEventListener("click", () => 
  resetButton.classList.remove("hidden");
  task();
);

// Set the "click" event listener and handle it as intended
resetButton.addEventListener("click", () => 
  count = 0;
  taskList.innerHTML = "";
  resetButton.classList.add("hidden");
);

input[type=checkbox] 
  margin-right: 0.5rem;


p 
  border: 1px solid green;


.hidden 
  display: none;

<h1>To-Do List</h1>
<section><input type="text" placeholder="Write a Task" id="task"></section>
<section><button id="go">GO</button> <button class="hidden" id="reset">RESET</button>
</section>
<hr>
<section id="tasklist"></section>

【讨论】：

以上是关于删除 JS 中的元素的主要内容，如果未能解决你的问题，请参考以下文章

js删除数组中的元素delete和splice的区别

怎样删除js数组中的undefined？

js如何删除数组中的第一个元素

js删除数组元素中的指定值

js删除数组中的元素delete和splice的区别

删除 JS 中的元素