Button that removes a text box and a value from a div

0

As my question says, I have a dilemma in this part, and that is that I want to create a button that with the action of a javascript deletes a text box and in turn, subtracts a value from a div.

I have a script created, but when you delete the text box, it does not delete the div, I have to double click to remove a value from the div.

For example, my div adds three text boxes, and the value of the div increases to 3, but when you delete a text box, it disappears but the value of the div does not, until the second click.

function quitarpaq() {
    var nump = document.getElementById('valnumpaq'); //Este es el ID del div con el valor

    if(div2.style.display == 'block') { //escogemos el div a eliminar
        div2.style.display = 'none'; // Si el div estaba activo, entonces lo eliminamos
        FillContenedor(<?php echo $lnLimite; ?>); //eliminamos el contenido del cuadro de texto
        nump.value= "<?php echo $lnLimite -1; ?>"; //Restamos uno al valor del div
<?php
for ($lnBulto = $lnLimite - 1; $lnBulto >= 1; $lnBulto--) { //Loop para eliminar varios cuadros de texto
?>
    } else if (div<?php echo $lnBulto; ?>.style.display == 'block') {
        div<?php echo $lnBulto; ?>.style.display = 'none';
        FillContenedor(<?php echo $lnBulto; ?>);
        nump.value="<?php echo $lnBulto; ?>";
<?php
}
?>
    }
}

If you could help me with some fiddle, I would be very grateful.

EDIT:

I put part of the PHP code with which I have problems.

    <form class="form-envio" action="" method="POST" name="form1" id="myform1992" target="_self">
        <fieldset>
            <div class="divide"> </div>
            <h2>Peso y medidas</h2>
            <h3><img src="images/exclamation-mark.svg" width="18" height="18"/> No declarar el tamaño o peso correcto de tu paquete puede ocasionar cargos adicionales.</h3><br/>
            <div id="contenedor1">
                <div class="field-small">
                    <label>Peso (Kg) *</label>
                    <input type="text" class="small" id="txtpeso1" name="txtpeso1" value="" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small">
                    <label>Largo (cm) *</label>
                    <input type="text" class="small" id="txtlargo1" name="txtlargo1" value="" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small">
                    <label>Ancho (cm) *</label>
                    <input type="text" class="small" id="txtancho1" name="txtancho1" value="" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small last">
                    <label>Alto (cm) *</label>
                    <input type="text" class="small" id="txtalto1" name="txtalto1" value="" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
            </div>
    <?php
    for ($lnBulto = 2; $lnBulto <= $lnLimite; $lnBulto++) {
    ?>
            <div id="contenedor<?php echo $lnBulto;?>" style="display:none">
                <div class="field-small">
                    <label>Peso<?php echo $lnBulto;?> (Kg) *</label>
                    <input type="text" class="small" id="txtpeso<?php echo $lnBulto;?>" name="txtpeso<?php echo $lnBulto;?>" value="0" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small">
                    <label>Largo<?php echo $lnBulto;?> (cm) *</label>
                    <input type="text" class="small" id="txtlargo<?php echo $lnBulto;?>" name="txtlargo<?php echo $lnBulto;?>" value="0" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small">
                    <label>Ancho<?php echo $lnBulto;?> (cm) *</label>
                    <input type="text" class="small" id="txtancho<?php echo $lnBulto;?>" name="txtancho<?php echo $lnBulto;?>" value="0" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
                <div class="field-small last">
                    <label>Alto<?php echo $lnBulto;?> (cm) *</label>
                    <input type="text" class="small" id="txtalto<?php echo $lnBulto;?>" name="txtalto<?php echo $lnBulto;?>" value="0" required="" onkeypress="return soloEntero(event)" onkeyup="BLDefecto()" />
                </div>
            </div>
    <?php
    }
    ?>
            <div id="bultos" class="field-left">
                <button type="button" class="btn" onclick="javascript:agregarpaq()" id="agregarpaquete" name="agregarpaquete" >Agregar Bultos</button>
                <button type="button" class="btn" onclick="javascript:quitarpaq()" id="quitarpaquete" name="quitarpaquete" >Quitar Bultos</button>
                <button type="button" class="btn" onclick="javascript:clonarpaq()" id="clonarpaquete" name="clonarpaquete" title="Copia el Bulto 1" >Copiar Bulto</button>
            </div>


            <input type="hidden" value="1" name="valnumpaq" id="valnumpaq" />


    </form>
<script>
function agregarpaq() {
    var nump = document.getElementById('valnumpaq');

    if(div2.style.display == 'none') {
        div2.style.display = 'block';
        nump.value="2";
<?php
for ($lnBulto = 3; $lnBulto <= $lnLimite; $lnBulto++) {
?>
    } else if (div<?php echo $lnBulto; ?>.style.display == 'none') {
        div<?php echo $lnBulto; ?>.style.display = 'block';
        nump.value="<?php echo $lnBulto; ?>";
<?php
}
?>
    }
}

function quitarpaq() { //AQUI ME CAUSA PROBLEMAS
    var nump = document.getElementById('valnumpaq');

    if(div<?php echo $lnLimite; ?>.style.display=='block') {
        div<?php echo $lnLimite; ?>.style.display='none';
        FillContenedor(<?php echo $lnLimite; ?>);
        nump.value = "<?php echo $lnLimite -1; ?>";
<?php
for ($lnBulto = $lnLimite-1; $lnBulto >= 0; $lnBulto--) {
?>
    } else if (div<?php echo $lnBulto; ?>.style.display=='block') {
        div<?php echo $lnBulto; ?>.style.display='none';
        FillContenedor(<?php echo $lnBulto; ?>);
        nump.value="<?php echo $lnBulto; ?>";
<?php
}
?>
    console.log(document.form1.txtpeso3.value);
    }
}
function clonarpaq(clonar) {
    clonar  = typeof clonar !== 'undefined' ?  clonar : "S";
    var nump = document.getElementById('valnumpaq');
    if(clonar == 'S') {
        peso  = document.form1.txtpeso1.value ;
        ancho = document.form1.txtancho1.value;
        largo = document.form1.txtlargo1.value;
        alto  = document.form1.txtalto1.value;
    } else {
        peso  = "0";
        ancho = "0";
        largo = "0";
        alto  = "0";
    }

    if(div2.style.display == 'none') {
        div2.style.display = 'block';
        nump.value="2";
        FillContenedor(2, peso, ancho, largo, alto );
<?php
for ($lnBulto = 3; $lnBulto <= $lnLimite; $lnBulto++) {
?>
    } else if (div<?php echo $lnBulto; ?>.style.display == 'none') {
        div<?php echo $lnBulto; ?>.style.display = 'block';
        nump.value="<?php echo $lnBulto; ?>";
        FillContenedor(<?php echo $lnBulto; ?>, peso, ancho, largo, alto );
<?php
}
?>
    }
}
</script>
    
asked by Eduardo Leon 03.01.2019 в 19:58
source

0 answers