Quiero poder eliminar el valor de entrada, pero el siguiente código en js no funciona:
delette.addEventListener('click', ()=>{ delette.remove(); })código HTML
<body> <div class="container"> <div class="bg-image"></div> <h2 class="heading">Einkaufsliste</h2> <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien"> <button type="button" class="button">Hinzufügen</button> <div class="saved-list"></div> <a href="#" id = close> <i class = "fas fa-times"></i> </a> </div> <script src="funktion.js"></script> </body>codigo js
const input = document.querySelector('.input-materialien') const list = document.querySelector('.saved-list') const button = document.querySelector('.button') const delette = document.getElementById('close') button.addEventListener('click', ()=>{ list.appendChild(delette) list.innerHTML = list.innerHTML + input.value; list.appendChild(document.createElement('br')) }) delette.addEventListener('click', ()=>{ delette.remove(); })Espero haber entendido bien la tarea.
Cada vez que cree un nuevo registro, debe cerrar el texto y el botón eliminar en un elemento de empaque. Esto facilita mucho la eliminación del registro seleccionando el elemento de empaquetado.
Cada vez que crea un nuevo registro, debe colocar un oyente en el elemento que se eliminará. Cuando se hace clic, llama a la función "removeElement()" que toma el elemento principal y lo elimina.
Ejemplo:
const input = document.querySelector('.input-materialien'); const list = document.querySelector('.saved-list'); const button = document.querySelector('.button'); button.addEventListener('click', () => { // Create elements DIV and SPAN // DIV is wrapped element // SPAN is delete element var div = document.createElement('div'); var span = document.createElement('span'); // Get Input Value var txt = document.createTextNode(input.value); span.innerHTML = '<i class="fas fa-times">x</i>'; div.appendChild(span); div.appendChild(txt); list.appendChild(div); // Remove value from input input.value = ''; // Add event listner to 'SPAN' element span.addEventListener('click', function () { removeElement(this); }); }); function removeElement(x) { x.parentNode.remove(); } span { color: red; padding-right: 5px; cursor: pointer; } <div class="container"> <div class="bg-image"></div> <h2 class="heading">Einkaufsliste</h2> <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien"> <button type="button" class="button">Hinzufügen</button> <div class="saved-list"></div> </div>codigo js
const input = document.querySelector('.input-materialien') const list = document.querySelector('.saved-list') const button = document.querySelector('.button') const delette = document.getElementById('close') button.addEventListener('click', () => { let cln = delette.cloneNode(true); cln.innerHTML += input.value + '<br/>'; list.appendChild(cln); cln.addEventListener('click', () => { cln.remove(); }) // an alternative to above "+ '<br/>'" // cln.appendChild(document.createElement('br')) }) (function() { const input = document.querySelector('.input-materialien') const list = document.querySelector('.saved-list') const button = document.querySelector('.button') const delette = document.getElementById('close') button.addEventListener('click', () => { let cln = delette.cloneNode(true); cln.innerHTML += input.value + '<br/>'; list.appendChild(cln); cln.addEventListener('click', () => { cln.remove(); }) // an alternative to above "+ '<br/>'" // cln.appendChild(document.createElement('br')) }) })(); <body> <div class="container"> <div class="bg-image"></div> <h2 class="heading">Einkaufsliste</h2> <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien"> <button type="button" class="button">Hinzufügen</button> <div class="saved-list"></div> <a href="#" id="close"> <i class="fas fa-times"><span></span></i> </a> </div> <script src="funktion.js"></script> </body>