No entiendo porque este código me elimina los dos cuadrados cuando pulso (con el botón derecho) un cuadrado y luego hago lo mismo en el otro y allí pulso eliminar:
document.getElementsByTagName("p")[0].addEventListener("contextmenu", mostrar);
document.getElementsByTagName("p")[1].addEventListener("contextmenu", mostrar);
function mostrar(e) {
e.preventDefault();
document.getElementsByClassName("d")[0].style.display = "block";
document.getElementsByClassName("d")[0].style.top = parseFloat(getComputedStyle(e.target).top) /*+ parseFloat(getComputedStyle(e.target).height)*/ + "px";
document.getElementsByClassName("d")[0].style.left = "110px";
document.querySelector("#Eliminar").addEventListener("click", eliminar);
function eliminar() {
document.body.removeChild(e.target);
document.getElementsByClassName("d")[0].style.display = "none";
}
}
.p {
height: 100px;
width: 100px;
background: green;
position: absolute;
}
.d {
display: none;
position: absolute;
z-index: 1;
background: aqua;
}
.p2 {
top: 150px;
}
<p class="p1 p"></p>
<p class="p2 p"></p>
<div class="d"><p id="Eliminar">Eliminar</p></div>
¿Por qué me elimina los dos si yo escribí document.body.removeChild(e.target);
?, ¿En donde me perdí?.
También he notado un error si pulso con el botón derecho a un cuadrado luego paso al otro, vuelvo a pulsar en el cuadrado de antes y le doy a eliminar me sale un error:
DOMException: Falied to execute 'removeChild' on "Node": the element is not a child of this node...
Tampoco entiendo porque pasa esto, se supone que me debe eliminar el e.target
, es decir el elemento al cual por ultima vez he pulsado.
Intentando averiguar que es lo que pasa, me di cuenta de que después de hacer clic derecho en un cuadrado, luego volverlo a hacer en el otro y dándole a eliminar se ejecuta document.body.removeChild(e.target);
pero el e.target
era el de antes además se ejecuta de dos veces, no entiendo porque.
En fin, me pueden explicar porque mi código se comporta así? Lo único que quería es que si se le da al eliminar se elimine el elemento en el cual apareció el eliminar😥.