为什么删除功能在 javascript 的事件委托中不起作用？

Question

我想在单击刷新 btn 时删除 h1 标签，但它不会删除 h1 标签，但是当我运行通过在每个 btn 上使用 addeventlistener 来使用相同的代码时运行 .但不是运行在 delgation .

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

您可以使用永久输出 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) 版本和一些简化版本。处理被移动到一个单独的函数。请参阅代码段中的评论以获取解释。

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>

为什么删除功能在 javascript 的事件委托中不起作用？

why remove function is not working in event delegation in javascript?

javascript

event-delegation