I am trying to learn stuff I was used to doing in jQuery in plain JavaScript.
I have an example I found on the internet to solve, which gave me a hard time.
I am trying to remove the parent div. single on click on the button. remove.
Here is the code;
<div class="row" id="showAward">
</div>
<div class="w-100 text-center">
<a id="add" class="bg-primary text-white px-3 py-2 rounded-circle cursor-pointer">
<i class="fa-solid fa-plus"></i>
</a>
</div>
<script>
let count = 0;
document.addEventListener('click', function(event) {
if (event.target.id === 'add') {
count++;
addAward(count);
}
if (event.target.classList.contains('delete')) {
event.currentTarget.parentNode.remove();
}
});
function addAward(number) {
let html = `<div class="col-lg-4 mb-3 position-relative">
<label for="image${number}" class="form-label">image ${number}</label>
<input type="file" class="form-control" id="image${number}" name="image${number}">
<a class="delete text-danger cursor-pointer position-absolute end-0 top-0"><i class="fa-solid fa-times"></i></a>
</div>`;
document.getElementById('showAward').insertAdjacentHTML('beforeend', html);
}
</script>