Skip to main content
2 de 3
se añadieron 6887 caracteres en el cuerpo
APRECode
  • 53
  • 1
  • 12

Eliminar datos de localStorage y actualizar lista

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(date) {
                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>

APRECode
  • 53
  • 1
  • 12