0

Buenas noches compañeros, necesito su apoyo por favor.

Estoy usando localStorage para mantener mis datos al actualizar o cerrar el navegador, pero me muestra error al eliminar la fila, y a la vez lograr que este se actualice mostrando los datos de las filas restantes dentro de la tabla. El boton con id "btnsave" guarda los datos de los inputs y divs, y me permite listarlos en una tabla. Ahora intento eliminar al clickeat el boton con class "btneliminar", pero no elimina la fila.

Estaré atento a sus sugerencias compañeros, gracias, ante todo.

        $(document).ready(function () {

            $(".selecproduct").click(function () {
                // Encontrar elemento con clase nameproduc desde el enlace
                let marpro = $(this).find('.marcproduc').html();
                let nompro = $(this).find('.nameproduc').html();
                let detpro = $(this).find('.cprecio-pes').html();
                let prepro = $(this).find('.precioproduct').html();

                $("#titmarcproduc").html(marpro);
                $("#nomproducts").html(nompro);
                $("#prodetalle").html(detpro);
                $("#precio").val(prepro);
                $("#cantidad").val("1");
                $("#costo").html(prepro);
            });



            //Inicio cargando los datos guardados:        
            verproducts();


            function verproducts() {

                if (localStorage.getItem('productsall')) {
                    let productsall = [];
                    // let nomprotd = "nomprotd";
                    productsall = JSON.parse(localStorage.getItem('productsall'));
                    productsall.forEach(products => {
                        $("table tbody").prepend(`
                        <tr class="lista">
                            <td class="nomprotd">${products.nompro}</td>
                            <td>${products.canpro}</td>
                            <td>${products.prettl}</td>
                            <td class="btnelim"><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                        </tr>`);
                    });
                } else {
                    alert("Si se puede")
                };
            }


            $("#btnsave").click(function () {
                btnsavelista();
            });


            //Busco eliminar una fila mediante el boton con clase "btneliminar"
            $(".btnelim .btneliminar").click(function () {
                
                alert("btn Eliminar");
                btneliminLista();
            });




            function btneliminLista() {
                let nombpro = $("td.nomprotd").html();
                
                if (localStorage.getItem("productsall")) {
                    var ind = 0;
                    var listado = false;
                    var productsall = [];

                    productsall = JSON.parse(localStorage.getItem("productsall"));
                    for (let i = 0; i < productsall.length; i++) {
                        if (productsall[i].nompro == `${nombpro}`) {
                            ind = i;
                            listado = true;
                        }
                    }
                    if (listado) {
                        productsall.splice(ind, 1);
                        $(this).closest('tr').remove();
                        localStorage.setItem("productsall", JSON.stringify(productsall));
                        $("table tbody").html("");
                        verproducts()
                    }
                    // verproducts();
                }
            }


            //Guarda los datos del formulario:
            function btnsavelista() {
               
                let prproduct = $("#nomproducts").html();
                let prcant = $("#cantidad").val();
                let prtotal = $("#costo").html();
                let products = {
                    'nompro': prproduct,
                    'canpro': prcant,
                    'prettl': prtotal
                }
                let productsall = [];
                if (localStorage.getItem('productsall')) {
                    productsall = JSON.parse(localStorage.getItem('productsall'))
                }

                productsall.push(products);
                localStorage.setItem('productsall', JSON.stringify(productsall));
                $("table tbody").prepend(`
                        <tr class="lista">
                            <td class="nomprotd">${prproduct}</td>
                            <td>${prcant}</td>
                            <td>${prtotal}</td>
                            <td class="btnelim"><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                        </tr>`);
            }
        });
.bg-shad {
  background: #ffffff;
  box-shadow: 0 2px 10px 0 #e2e8ee !important;
}
.bg-light-pru {
  background-color: #1A237E;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <br>
    <section class="my-5">
        <div class="container">
            <div class="row d-flex justify-content-center">

                <div class="col-12 col-md-6 bg-shad py-3">
                    <div class="container" id="detprecio">
                        <div class="row px-2">
                            <form id="form">
                                <div class="row">
                                    <div id="titmarcproduc" class="titmarcproduc col-12 col-md-10 py-1 fs-12 text-left">
                                        Producto1
                                    </div>
                                    <div id="nomproducts" class="titnomproduc h2 col-12 col-md-10 text-left">Producto2
                                    </div>
                                    <div id="prodetalle"
                                        class="prodetalle h2 col-12 col-md-10 text-left fs-10 text-color-pru">Producto3
                                    </div>
                                </div>
                                <hr>
                                <div class="row mt-4">
                                    <div class="form-group col-4 col-md-3 p-1 border">
                                        <label>Precio:(s/.)</label>
                                        <input type="text" name="Precio" id="precio"
                                            class="fs-12 monto inpprecio form-control text-center" value="15" readonly
                                            onkeyup="multi();">
                                    </div>
                                    <div class="form-group col-4 col-md-2 p-1 border">
                                        <label class="">Cantidad:</label>
                                        <input type="text" name="Cantidad" id="cantidad"
                                            class="fs-12 monto form-control text-center" value="1" placeholder="1"
                                            onkeyup="multi();" required pattern="^[1]\d{3}$" minlength="1" maxlength="3"
                                            min="1" max="3" title="Ingresa el número de productos.">
                                    </div>
                                    <div class="form-group col-4 col-md-3 p-1 border">
                                        <label>Total:(s/.)</label>
                                        <div id="costo" class="inptotal mt-2 border-bottom text-center h4">15
                                        </div>
                                    </div>
                                    <div
                                        class="col-12 col-md-4 d-flex justify-content-md-end justify-content-sm-start px-0 align-items-center">
                                        <button type="button" id="btnsave" class="btn btn-info text-white">Agregar
                                            a tu lista</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <hr>
                        <div class="row border rounded-0 mt-2 mt-md-4">
                            <div class="col-12 col-md-12">
                                <table class="table">
                                    <thead class="bg-light-pru">
                                        <tr>
                                            <th scope="col" class="text-white">Producto</th>
                                            <th scope="col" class="text-white">Cantidad<span class="fs-7">xUnd</span>
                                            </th>
                                            <th scope="col" class="text-white">Costo<span class="fs-7">(s/.)</span></th>
                                            <th scope="col" class="text-white">-</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
        </div>
    </section>

4
  • Por favor, podrías añadir el error concreto que te da?
    – sergiomse
    Commented el 5 sept. 2020 a las 12:21
  • Gracias por responder, no me muestra un error sergiomse, y solo me permite eliminar la fila despues de actualizar la pagina al presionar btneliminar.
    – APRECode
    Commented el 5 sept. 2020 a las 12:58
  • Es difícil saber qué está pasando, pero si no da error y tampoco se guarda, posiblemente no este entrado en el if (listado) porque listado no está a true. Prueba a poner un punto de interrupción en el if anterior y depurar
    – sergiomse
    Commented el 5 sept. 2020 a las 13:02
  • Gracias sergiomse, veo que si ingresa al if y listado esta en true, además, si elimina la fila, pero tengo que actualizar la pagina cada vez que intente eliminar cada fila.
    – APRECode
    Commented el 5 sept. 2020 a las 14:35

1 respuesta 1

0

Parece que el problema está dentro de la función verproducts que no está actualizando los registros de la tabla correctamente al eliminar.

Intenta añadir esta línea:

$("table tr").remove();

justo antes de la iteración del productsall.forEach(products => { dentro de esa función a ver si así funciona correctamente.

1
  • sergiomse gracias nuevamente, agregue la línea en el espacio que me indicas, pero no consigo corregirlo. Cada lista tiene su boton para eliminarla y me percate que luego de actualizar la página solo me funciona un boton de la fila que se agregó primero y los otros botones no ejecutan el evento. Edite y agregue todo el codigo en esta pregunta.
    – APRECode
    Commented el 5 sept. 2020 a las 17:05

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.