0
198
ViewsJS onclick button remove it from DOM not working properly when it has a sub-element attached
I have the following html structure:
<div class="input-group mt-3 ms-3" style="max-width: 300px">
<input type="text" class="form-control form-control-sm" name="search" placeholder="Type something"/>
<button type="button" class="btn btn-secondary btn-sm btn-clear-search-input" style="width: 50px">
<i class="fas fa-times"></i>
</button>
</div>
And I'd like to remove the button after it has been pressed. The problem is that if the user presses right in the middle of the button (where the <i> is), it only removes the
<i>.
const btnClearSearchInput = document.getElementsByClassName('btn-clear-search-input')[0];
btnClearSearchInput.addEventListener('click', clearSearch);
function clearSearch(event)
{
event.target.remove();
}
By performing console.log() on event.target and event.srcElement I can see that the the value is related with <i>.
The following JSFiddle illustrates the problem.
·
Juan Pablo Isaza
1 answers
Answer question0
That's because the i is the element upon which the event was fired, and is therefore the event.target; instead use:
function clearSearch(event) {
// the event.currentTarget is the node to
// which the event-listener was bound, instead
// of the event.target, which is the node
// on which that the event-listener is
// listening for, was initially fired:
event.currentTarget.remove();
}
// using document.querySelector() to find, and return, the first element which
// matches the supplied selector:
const btnClearSearchInput = document.querySelector('.btn-clear-search-input');
btnClearSearchInput.addEventListener('click', clearSearch);
function clearSearch(event) {
event.currentTarget.remove();
}*, ::before, ::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
div.input-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
}
i.fas.fa-times::before {
content: 'X';
width: 1.5em;
aspect-ratio: 1;
}<div class="input-group mt-3 ms-3" style="max-width: 300px">
<input type="text" class="form-control form-control-sm" name="search" placeholder="Type something" />
<button type="button" class="btn btn-secondary btn-sm btn-clear-search-input">
<i class="fas fa-times"></i>
</button>
</div>References:
·
Juan Pablo Isaza
Report
Answer question