洗掉JS中的元素-有解無憂

我試圖為待辦事項串列創建一個站點原型，以使用 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 中定義） new 生成<p></p>。它成功地在文本框中鍵入的文本旁邊生成一個復選框，然后用<br>.

我試圖消除通過按下重置按鈕生成的元素，但盡管嘗試了多種解決方案，但唯一似乎有效的方法是洗掉正文的所有內容。

你能提出一個解決方案來讓它作業嗎？

uj5u.com熱心網友回復：

只需按照以下步驟對您的 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";
});

uj5u.com熱心網友回復：

您在原始代碼中遇到的主要問題是您試圖在函式中的 return 陳述句之后創建一個eventListenertask。將回傳函式放在最后將允許您按預期添加事件偵聽器，但我建議將事件偵聽器移到任務函式之外，以便僅呼叫一次。

我在下面的代碼中所做的大多數其他更改都是優先更改，但我將列出一些可以幫助您解決此問題的內容。

在#reset元素的事件偵聽器中，您要清除任務。有幾種方法可以做到這一點，但大多數方法都涉及修改插入的元素，以確保您只洗掉您打算洗掉的元素。您已經在使用段落<p>標簽，因此這是將復選框和任務項文本包裝在一起的絕佳選擇（您也可以使用串列項<li>標簽并將整個串列包裝在無序串列<ul>或有序串列<ol>標簽中）。

將其添加到串列后的任務示例：

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

至于處理重置，您希望將整個串列包裝在一個容器元素中，例如section您的代碼中已有的元素。這確實涉及將重置按鈕移出，以便我們不會將其從 DOM 中洗掉：

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

現在，當呼叫重置事件處理程式時，您可以使用.innerHTML = ""清除串列。

此外，我onclick從 HTML 中的 GO 按鈕中洗掉了該屬性，并將其添加到 JavaScript 中的事件處理程式中。

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

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

我還添加了一些有用的功能，例如創建一次必要的元素并使用克隆Node.cloneNode()，設定對腳本中所需靜態元素的參考，以及使用復選框的唯一 ID 創建標簽，以便選擇文本將選中復選框（有助于可訪問性，但取決于您是否需要它）。

// 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 botton 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339267.html

標籤：javascript 查询按钮附子创建元素

上一篇：在文本之前添加影像

下一篇：jQuery文本僅在第二次單擊后更改