0

Quiero eliminar un div hijo con un boton de eliminar pero si me funciona pero tengo que darle dos veces al boton para que se borre el div, nose como hacer que solo funcione con un click al darle al boton eliminar, es como que solo funciona en tiempo de ejecucion porque si llamo la funcion RemoveComunicado() por fuera de la otra funcion funciona perfectamente pero esa no es la intencion, necesito usar la otra funcion para validar

function RemoveComunicado() {
    let invoiceContainer = document.querySelector('.container');
    let removeBtn = document.querySelectorAll('.remove');

    for (let i = 0; i < removeBtn.length; i++) {
        removeBtn[i].addEventListener('click', RemoveMensaje);
    }

    function RemoveMensaje(event) {
        event.preventDefault();
        invoiceContainer.removeChild(event.currentTarget.parentElement);
    }
}

function Comunicado(valor) {
    if(valor == '1'){
       RemoveComunicado();
    }
}
<!DOCTYPE html>
<html>
<body>

<div class="container">
<!-- contenedor 1 -->
<div>
<p>Hola1</p>
<input type="button" value="Eliminar" class="remove" onclick="Comunicado('1')"/>
</div>
<!-- contenedor 1 -->
<!-- contenedor 2 -->
<div>
<p>Hola2</p>
<input type="button" value="Eliminar" class="remove" onclick="Comunicado('1')"/>
</div>
<!-- contenedor 2 -->
</div>

</body>
</html>

1
  • Intenta poniendo RemoveComunicado(); al final de tu código JS... Commented el 16 feb. 2023 a las 23:06

1 respuesta 1

1

Tu código funciona de esta manera y en este orden

  • Se presiona el botón
  • Se llama a Comunicado
  • Comunicado llama a RemoveComunicado
  • Se le asigna un nuevo evento al botón, que ejecuta RemoveMensaje
  • Ahora botón tiene 2 eventos y se para el asunto

Entonces si vuelves a presionar el botón, recién se ejecuta RemoveMensaje.

Si lo que quieres es eliminar el padre de un botón mucho más fácil enviar el botón mismo como argumento, y como verá es un código muy corto

function RemoveMensaje(boton) {
    boton.parentElement.remove();
}
<div class="container">
<!-- contenedor 1 -->
<div>
<p>Hola1</p>
<input type="button" value="Eliminar" class="remove" onclick="RemoveMensaje(this)"/>
</div>
<!-- contenedor 1 -->
<!-- contenedor 2 -->
<div>
<p>Hola2</p>
<input type="button" value="Eliminar" class="remove" onclick="RemoveMensaje(this)"/>
</div>
<!-- contenedor 2 -->
</div>

1
  • Muchas gracias ya me funciona Commented el 16 feb. 2023 a las 23:18

Tu Respuesta

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

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