為什么刪除 function 在 javascript 的事件委托中不起作用？

Question

我想在單擊刷新 btn 時刪除h1標簽，但它不會刪除 h1 標簽，但是當我在每個運行的 btn 上使用 addeventlistener 運行相同的代碼時。 但不是在委托中運行。

 var wrapper = document.querySelector(".wrapper"); wrapper.addEventListener("click", function(e) { var currentYear = 2018; var h1 = document.createElement("h1"); if (e.target.id === "btn") { var data = document.getElementById("age").value var output = currentYear - data; h1.innerText = output + " year old"; age.after(h1) } if (e.target.id === "dlt") { var data = document.getElementById("age").value = null; h1.remove(); } }, false);

 <div class="wrapper"> <h1>ENTER YOUR AGE</h1> <input type="text" id="age"> <button id="btn">Get Age</button> <button id="dlt">Refresh</button> </div>

Answer 1

您應該找到它，而不是創建h1元素。

所以替換：

var h1 = document.createElement("h1");

和

var h1 = document.querySelector("h1");

但是，請確保在找不到時創建一個新的h1 ，並將其插入到第一個if塊中的文檔中。 隱藏和顯示它可能會更好。

出生年份和年齡之間似乎也存在混淆：用戶要么輸入他們的出生年份，然后他們就得到年齡，反之亦然。

最后，刪除第二個if塊中對data的分配：它沒有任何作用。

建議的片段：

 var wrapper = document.querySelector(".wrapper"); var h1 = document.querySelector("h1"); wrapper.addEventListener("click", function(e) { var currentYear = 2018; if (e.target.id === "btn") { var data = document.getElementById("age").value var output = currentYear - data; h1.innerText = output + " year old"; h1.classList.remove("hidden"); age.after(h1) } if (e.target.id === "dlt") { h1.classList.add("hidden"); document.getElementById("age").value = null; h1.remove(); } }, false);

 .hidden { display: none }

 <div class="wrapper"> <h1>Enter your Year of Birth</h1> <input type="text" id="age"> <button id="btn">Get Age</button> <button id="dlt">Refresh</button> </div>

Answer 2

您可以在創建元素時設置屬性並使用屬性將其刪除。

 var wrapper = document.querySelector(".wrapper"); wrapper.addEventListener("click", function(e) { var currentYear = 2018; var h1 = document.createElement("h1"); h1.setAttribute("id", "title") if (e.target.id === "btn") { var data = document.getElementById("age").value var output = currentYear - data; h1.innerText = output + " year old"; age.after(h1) } if (e.target.id === "dlt") { var data = document.getElementById("age").value = null; document.getElementById("title").remove() } }, false);

 <div class="wrapper"> <h1>ENTER YOUR AGE</h1> <input type="text" id="age"> <button id="btn">Get Age</button> <button id="dlt">Refresh</button> </div>

我建議進行一些清理工作。 您可以使用顯示樣式來隱藏您的顯示。

 const btn = document.querySelector(".wrapper.btn"); const dlt = document.querySelector(".wrapper.dlt"); const input = document.querySelector(".wrapper input"); const title = document.querySelector(".wrapper.title"); title.style = "display:none"; btn.addEventListener("click", () => { const currentYear = 2018; const output = currentYear - input.value; console.log(output) title.innerText = output + " year old"; title.style = "display:block" }) dlt.addEventListener("click", () => { input.value = ""; title.style = "display:none"; })

 <div class="wrapper"> <h1>ENTER YOUR AGE</h1> <input type="text"> <h1 class="title">Get Age</h1> <button class="btn">Get Age</button> <button class="dlt">Refresh</button> </div>

Answer 3

相反，您可以擁有一個永久的 output h1 標簽。 像那樣。

 var wrapper = document.querySelector(".wrapper"); var out = document.querySelector("#res"); wrapper.addEventListener("click", function(e) { var currentYear = 2018; if (e.target.id === "btn") { var data = document.getElementById("age").value var output = currentYear - data; out.innerText = output + " year old"; out.classList.remove("hidden"); } if (e.target.id === "dlt") { out.classList.add("hidden"); document.getElementById("age").value = null; out.innerHTML = ''; } }, false);

 .hidden { display: none }

 <div class="wrapper"> <h1>Enter your Year of Birth</h1> <input type="text" id="age"> <button id="btn">Get Age</button> <button id="dlt">Refresh</button> <h1 id="res"></h1> </div>

Answer 4

這是您的代碼的現代化（es20xx）和簡化版本。 處理移至單獨的 function。 請參閱片段中的注釋以獲取解釋。

 document.querySelector(`.wrapper`).addEventListener("click", handleWrapper); function handleWrapper(e) { const currentYear = 2018; let h1Result = e.target.closest(`.wrapper`).querySelector(`#result`); console.clear(); // Get Age if (e.target.id === `btn`) { const createH1 = () => { // use insertAdjacentHTML to create H1#result document.querySelector(`.wrapper`).insertAdjacentHTML( `beforeend`, ` <h1 id="result"></h1>` ); // ^ enable finding *this* h1, not the original // return the newly create element return document.querySelector(`.wrapper h1#result`); }; let data = +document.querySelector("#age").value.trim(); // ^ convert to Number data = isNaN(data) ||?data: 0; data, // ^ if conversion failed, or no data. set data to 0 // if [h1Result] is non existing create it using // the createH1 function expression and set the result // of the found or created element: // *Note, I took the liberty to call it the birth year. // because that seems to be goal here. (h1Result || createH1()):textContent = `Birth year; ${currentYear - data}`. } // Refresh if (e.target.id === `dlt`) { // empty input document.querySelector(`#age`);value = ``. // remove the result if it exists if (h1Result) { h1Result;remove(); } } }

 <div class="wrapper"> <h1>ENTER YOUR AGE</h1> <input type="text" id="age"> <:-- did you mean? get birth year? --> <button id="btn">Get Age</button> <button id="dlt">Refresh</button> </div>