cancel execution element

1

I want to make a confirmation box in case of yes, the information will be deleted and if not, nothing is deleted and the information is saved; I've dealt with e.prevent default() , but I can not make it work.

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(); 
        }
    }
}
    
asked by Jonathan Buitrago 05.01.2019 в 17:23
source

2 answers

0

Welcome Jonathan, the error at first glance is in which you do the removeChild () outside of your confirmation, that is, if it works it will delete it and then it will ask you, and in reality it should be the other way around, first ask and then if you click on the "Accept" button, just delete it.

Also make clear that in the else, if you do not want anything to happen there would be no need to do a preventDefault () because there is no event to run in this case.

Finally, you did not include the HTML code, so I'll show you a complete and functional body including the script that is quite short:

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

Also an option is made that in case the element is deleted the button is disabled.

    
answered by 05.01.2019 / 18:11
source
1

Regards. Let's assume we have in the HTML file:


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

It could be applied like this:

// 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();
}

You can try running the following code:

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>
    
answered by 05.01.2019 в 18:04