Remove elements from an array in jquery

0

I have the following problem, I have a table that is filled with several arrays that when clicking on a button the values are moved to another table, so far so good, the problem is when I want to remove the values (there is a button in each row of the table) when clicking on a value I can delete, but if there are 3 elements and I eliminate the first one, the table stays with a width (length) of 0 it is as if I deleted all the following records, so if I delete the 2nd record the following ones are eliminated, I leave part of the code:

<script type="text/javascript">

        var cont=0;
        var total=0;
        var arr_canti=[];
        var arr_id_bodega_producto=[];
        var arr_precio = [];
        var arr_subtotal = [];
        var v_id_bodega_producto = 0; 
        var v_producto =  "";
        var v_existencia = 0;
        var v_pre1 = 0;
        var v_pre2 = 0;
        var v_pre3 = 0;
        var v_pre4 = 0;
        var v_pre0 = 0;
        var v_canti = 0;
        var v_precio = 0;
        var v_id_del = 0;
    $(document).ready(function(){
        $('.agregar_fila').click(function(){
            document.getElementById('caja3').style.display='block';

            v_id_bodega_producto = $(this).parent().parent().find('input#val_id_bodega_producto').attr('value'); 
            v_producto =  $(this).parent().parent().find('input#val_producto').attr('value');
            v_existencia = parseInt($(this).parent().parent().find('input#val_existencia').attr('value'));
            v_pre1 = $(this).parent().parent().find('input#val_pre1').attr('value');
            v_pre2 = $(this).parent().parent().find('input#val_pre2').attr('value');
            v_pre3 = $(this).parent().parent().find('input#val_pre3').attr('value');
            v_pre4 = $(this).parent().parent().find('input#val_pre4').attr('value');
            v_pre0 = $(this).parent().parent().find('input#val_pre_farm').attr('value');


            $('#pre_producto').val(v_producto);
            $('#pre_existencia').val(v_existencia);
            $('#desc1').html(v_pre1);
            $('#desc2').html(v_pre2);
            $('#desc3').html(v_pre3);
            $('#desc4').html(v_pre4);
            $('#desc0').html(v_pre0);

            $('#des0').val(v_pre0);
            $('#des1').val(v_pre1);
            $('#des2').val(v_pre2);
            $('#des3').val(v_pre3);
            $('#des4').val(v_pre4);
        });
    });
    function quitar(){
        v_id_del = $(this).parent().parent().find('td:eq(0)').text();
        /*arr_canti.splice(v_id_del,1);
        arr_precio.splice(v_id_del,1);
        arr_id_bodega_producto.splice(v_id_del,1);
        arr_subtotal.splice(v_id_del,1);
        $(this).parent().parent().remove();*/
        //$(this).parent().parent().empty();
        alert("el id es "+v_id_del);
    }
    $(document).ready(function(){
        $('.quitar_fila').click(function(){
            alert("hizo click");
            //quitar();
        });
    });

    $(document).ready(function(){
        $('#btn_agr').click(function(){
            agregar();
        });
    });
    function agregar(){
        v_canti = $('#canti').val();
            v_precio = $("input[name='descuento']:checked").val();
            //alert("los valores son v_canti: "+v_canti+" id: "+v_id_bodega_producto+" v_precio: "+v_precio+" contador  "+cont+" v_existencia "+v_existencia+" total "+total);
            if(v_canti>0 && v_canti<=v_existencia)
            {

                arr_canti.push(v_canti);    
                arr_precio.push(v_precio);
                arr_id_bodega_producto.push(v_id_bodega_producto);
                arr_subtotal.push(arr_canti[cont]*arr_precio[cont]);
                total+=arr_subtotal[cont];
                var fila = '<tr id="no_fila'+cont+'" name="filas[]" "><td style="display:none;">'+cont+'</td><td>'+arr_canti[cont]+'</td><td>'+v_producto+'</td><td>'+arr_subtotal[cont]+'</td><td><a href="#" class="quitar_fila"><i class="fas fa-minus-square" style="font-size:50px; color: #c23235;"></i></a></td></tr>';
                $('#articulo3').append(fila);
                cont++;
                document.getElementById('subtotal').value = total;
                $('#caja3').hide();
            }
            else{
                alert("Cantidad Invalida");
            }
    }
    $(document).ready(function(){
        $('#btn_bor').click(function(){
            $('#caja3').hide();
        });
    });
</script>
    
asked by Mau España 08.08.2018 в 04:22
source

2 answers

0

The problem is that you are removing the entire <td>Datos</td> tag.
If you have a 3x3 table and you eliminate one of the tables the table loses its structure.
To empty said cell, you only need to empty the value:

//Con esto vacias completamente la celda
$(this).html("");

//Con este estableces el 0 como dato de la celda
$(this).html("0");

This way you do not delete the cell but only its value

DEMO

$(document).ready(function(){
 // Vacia la columna
  $("tr:nth-child(1)>td").click(function(){
      $(this).html("");
  });
  // Establece el valor a 0
  $("tr:nth-child(2)>td").click(function(){
      $(this).html("0");
  });
  // Escribe vacio
  $("tr:nth-child(3)>td").click(function(){
      $(this).html("vaciado");
  });
});
table,tr,td{
   border:1px solid black;
   border-collapse: collapse;
   cursor:pointer;
}
td{
   padding:5px;
   width:60px;
   text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td>Dato</td>
        <td>Dato</td>
        <td>Dato</td>
      </tr>
      <tr>
        <td>Dato</td>
        <td>Dato</td>
        <td>Dato</td>
      </tr>
      <tr>
        <td>Dato</td>
        <td>Dato</td>
        <td>Dato</td>
      </tr>
   </table>
    
answered by 08.08.2018 в 11:28
0

Thanks for the comments, maybe for more explanation, I do not just want to delete the value, I store the values in an array and then I show them in inputs (this is optional but if I want them in a table) then apart from removing the value in the array, I need to remove its respective row (with everything and td)

    
answered by 08.08.2018 в 16:46