I want to be able to remove the input value but the following code in js does not work:
delette.addEventListener('click', ()=>{
delette.remove();
})
html code
<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>
JS code
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();
})
I hope I understood the task correctly.
Each time you create a new record, you must close the text and the delete button in a packaging element. This makes it much easier to delete the record by selecting the packaging element.
Each time you create a new record, you must place a listener on the item to be deleted. When clicked, it calls the "removeElement()" function which takes the parent element and removes it.
Example:
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>JS code
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>