0

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😥.

1 respuesta 1

1

    document.getElementsByTagName("p")[0].addEventListener("contextmenu", mostrar);
document.getElementsByTagName("p")[1].addEventListener("contextmenu", mostrar);

 function mostrar(e) {
  e.preventDefault();
  objetivo = e.target;
  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( objetivo );
  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>

El problema era que que al hacer click sobre la ventana Eliminar, cambiaba el target a la propia ventana, lo que hice fue guardar en una variable el target del primer click, para usarlo en la función eliminar.

5
  • Lo he probado con mi código y sigue igual, si pulso los dos elemtos de la forma que dije se eliminan los dos, ademas en tu código se ejecuta automaticamente la funcion de eliminar pq le pusiste las llaves(eliminar(e) aunque se soluciona podiendolo en una funcion) y no puede mostrarse el menú para seleccionar eliminar
    – Microchip
    el 10 ene. a las 20:42
  • Hola @Roberto, detecte el problema, estoy buscando una solución, cuando haces click sobre el cuadro, e toma como target el cuadro, el problema es que cuiando haces click sobre Eliminar, lo toma como target, y por supuesto, no encuentra hijos... de alguna manera, hay que registrar el primer target. el 10 ene. a las 23:56
  • @Roberto edite la respuesta y... listo, funciona!!!... me ha dado un poco de trabajo encontrarle la vuelta :) el 11 ene. a las 0:51
  • Gracias!😄, aunque aún tengo dudas porque el target se cambia?😅, es que sigo sin entenderlo.🤨😭
    – Microchip
    el 11 ene. a las 17:32
  • 1
    @Roberto, es simple, cuando haces click sobre el cuadrado, este pasa a ser el target, el problema surge cuando quieres borrar y haces click sobre la mini ventana de Eliminar, al hacerlo, esta pasa a ser el target. el 12 ene. a las 0:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.