Quiero eliminar la etiqueta h1 cuando hago clic en actualizar btn pero no elimina la etiqueta h1 pero cuando ejecuto el mismo código usando addeventlistener en cada btn que se ejecuta. pero no se ejecuta en delegación.
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>Aquí hay una versión modernizada (es20xx) y algo optimizada de su código. El manejo se mueve a una función separada. Consulte los comentarios dentro del fragmento para obtener una explicación.
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>En lugar de crear un elemento h1 , debería encontrarlo .
Así que reemplaza:
var h1 = document.createElement("h1");con
var h1 = document.querySelector("h1"); Pero luego asegúrese de crear un nuevo h1 cada vez que no se encuentre, e insertarlo en el documento en el primer bloque if . Sería mejor esconderlo y mostrarlo .
También parece haber una confusión entre el año de nacimiento y la edad: el usuario debe ingresar su año de nacimiento y obtiene la edad, o viceversa.
Finalmente, elimine la asignación de data en el segundo bloque if : no sirve para nada.
Fragmento propuesto:
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>Puede establecer atributos mientras crea elementos y eliminarlos usando atributos.
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>Sugiero algunas limpiezas. Puede usar el estilo de visualización para mostrar su ocultación.
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>