Você pode adicionar um evento para capturar todos os eventos de click
no body
, ou restringir a um container onde estarão todos os .box
:
document.querySelector(".container_boxs").addEventListener('click', function(e) {
//...
});
E verificar nesse evento se o elemento clicado está na hierarquia DOM esperada:
if (e.target.className.toLowerCase() == 'close' && e.target.parentElement.className.toLowerCase() == 'box') {
alert('Você clicou no elemento close');
}
E por fim remove o elemento parent do item clicado, no caso o .box
:
// remove o parent do item clicado.
e.target.parentElement.remove();
Exemplo completo:
document.querySelector(".container_boxs").addEventListener('click', function(e) {
if (e.target.className.toLowerCase() == 'close' && e.target.parentElement.className.toLowerCase() == 'box') {
// remove o parent do item clicado.
e.target.parentElement.remove();
}
});
.box {
width: 100%;
height: 100px;
border: 1px solid black;
}
.box .close:after {
content: "\00d7";
}
.box .close {
background: #ccc;
}
<div class="container_boxs">
<div class="box">
<div class="close"></div>
</div>
<div class="box">
<div class="close"></div>
</div>
<div class="box">
<div class="close"></div>
</div>
</div>
Exemplo completo jsFiddle.
Créditos a base da solução: https://stackoverflow.com/a/9649651/2290538