1

Quiero hacer un cuadro de confirmación en caso que de si, se eliminara la información y en caso de que de no, no se elimina nada y se guarda la informacion; he tratado con e.prevent default(), pero no logro hacer que funcione.

function removerinput(event){
    input = document.getElementById("input");
    caja.removeChild(input);


    if (caja.childElementCount == 0) {
        var alerta = ("Estas a punto de eliminar tu ultimo valor ¿Estas seguro?");
        if (confirm(alerta)){
        alert("Eliminaste todos tus valores");
        }
        else{
        event.preventDefault(); 
        }
    }
}

2 respuestas 2

1

Saludos. Vamos a suponer que tenemos en el archivo HTML:


<button id="button">Eliminar Caja de Texto</button>
<hr>
<div id="caja">
  <input type="text" id="input" placeholder="Caja de texto">
</div>

Se podría aplicar así:

// Donde capturamos los elementos HTML:
var
  caja = document.querySelector("#caja"),
  remover = document.querySelector("#button"),
  input = document.querySelector("#input");


function removerInput() {
  // Verificamos si «input» no es «null», además de ser el único
  // dentro del elemento «caja»:
  if ( input !== null && caja.childElementCount ) {

        // Si el usuario hace clic en Aceptar, devolverá true (verdadero):
        var alerta = confirm("Estas a punto de eliminar tu último valor, ¿estás seguro?");

    // Si alerta es true (verdadero)
    if ( alerta ) {
     // Removerá el elemento
      caja.removeChild(input);
    }  
  }
}

// Probamos el código:
remover.onclick = function () {
  removerInput();
}

Puede probar ejecutar el siguiente código:

var
  caja = document.querySelector("#caja"),
  remover = document.querySelector("#button"),
  input = document.querySelector("#input");
  
function removerInput() {
  if ( input !== null && caja.childElementCount === 1 ) {
        
        var alerta = confirm("Estas a punto de eliminar tu último valor, ¿estás seguro?");
    
    if ( alerta ) {
      caja.removeChild(input);
    }  
  }
}

remover.onclick = function () {
  removerInput();
}
<button id="button">Eliminar Caja de Texto</button>

<hr>

<div id="caja">
  <input type="text" id="input" placeholder="Caja de texto">
</div>

0

Bienvenido Jonathan, el error a simple vista está en que haces el removeChild() fuera de tu confirmación, osea, si te llegara a funcionar va a eliminar y luego te va preguntar, y en realidad debería ser al revés, primero preguntar y luego si hacen click al boton "Aceptar" recién eliminarlo.

También dejar en claro que en el else, si no querés que suceda nada no habría necesidad de hacer un preventDefault() porque no hay ningun evento que ejecutar en este caso.

Finalmente, No incluiste el código HTML, así que te voy a mostrar un body completo y funcional incluyendo el script que es bastante corto:

<body>
    <div id="caja">
        <input type="text" placeholder="remover este input" id="input">
    </div>
    <hr>       
    <button id="boton" onclick="removerinput()"> remover </button>

    <script>
        function removerinput(){
            var caja = document.getElementById('caja');
            var input = document.getElementById('input');
            var boton = document.getElementById('boton');
            var respuesta =   confirm("Seguro que desea eliminar???");
            if( respuesta ){
                caja.removeChild(input);
                boton.disabled = true;
            }
        }
    </script>
</body>

También se hace una opción que en el caso de que se elimine el elemento el boton queda deshabilitado.

1
  • hola, gracias por tu respuesta, en parte ya solucione el problema, pero falla cuando se crean mas de dos inputs al inicio y se trata de eliminar el ultimo; este no se elimina y da un error. adjunto archivo js entero, espero y me puedas ayudar. Commented el 6 ene. 2019 a las 1:15

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.