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>