Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se eliminaron 4 caracteres en el cuerpo
Origen Enlace
APRECode
  • 53
  • 1
  • 12
        $(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>
        $(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>
        $(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>
se añadieron 6887 caracteres en el cuerpo
Origen Enlace
APRECode
  • 53
  • 1
  • 12
    <script>
    $(document).ready(function () {
        //Inicio cargando los datos guardados:        
        verproducts();
        function verproducts() {
            if (localStorage.getItem('productsall')) {
                let productsall = [];
                productsall = JSON.parse(localStorage.getItem('productsall'));
                productsall.forEach(products => {
                    $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${products.nompro}</td>
                        <td>${products.canpro}</td>
                        <td>${products.prettl}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
                });
            };
        }
        //Busco eliminar una fila mediante el boton con clase "btneliminar"
        $(".btneliminar").click(function () {
            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);
                    localStorage.setItem("productsall", JSON.stringify(productsall));
                    verproducts();
                }
            }
        });
        //Guarda los datos del formulario:
        $("#btnsave").click(
            function () {
                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'))
                }
                //añado este objeto
                productsall.push(products);
                localStorage.setItem('productsall', JSON.stringify(productsall));
                $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${prproduct}</td>
                        <td>${prcant}</td>
                        <td>${prtotal}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
            })
    });
</script>

        $(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>

    <script>
    $(document).ready(function () {
        //Inicio cargando los datos guardados:        
        verproducts();
        function verproducts() {
            if (localStorage.getItem('productsall')) {
                let productsall = [];
                productsall = JSON.parse(localStorage.getItem('productsall'));
                productsall.forEach(products => {
                    $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${products.nompro}</td>
                        <td>${products.canpro}</td>
                        <td>${products.prettl}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
                });
            };
        }
        //Busco eliminar una fila mediante el boton con clase "btneliminar"
        $(".btneliminar").click(function () {
            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);
                    localStorage.setItem("productsall", JSON.stringify(productsall));
                    verproducts();
                }
            }
        });
        //Guarda los datos del formulario:
        $("#btnsave").click(
            function () {
                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'))
                }
                //añado este objeto
                productsall.push(products);
                localStorage.setItem('productsall', JSON.stringify(productsall));
                $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${prproduct}</td>
                        <td>${prcant}</td>
                        <td>${prtotal}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
            })
    });
</script>

        $(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>

Origen Enlace
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.

    <script>
    $(document).ready(function () {
        //Inicio cargando los datos guardados:        
        verproducts();
        function verproducts() {
            if (localStorage.getItem('productsall')) {
                let productsall = [];
                productsall = JSON.parse(localStorage.getItem('productsall'));
                productsall.forEach(products => {
                    $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${products.nompro}</td>
                        <td>${products.canpro}</td>
                        <td>${products.prettl}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
                });
            };
        }
        //Busco eliminar una fila mediante el boton con clase "btneliminar"
        $(".btneliminar").click(function () {
            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);
                    localStorage.setItem("productsall", JSON.stringify(productsall));
                    verproducts();
                }
            }
        });
        //Guarda los datos del formulario:
        $("#btnsave").click(
            function () {
                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'))
                }
                //añado este objeto
                productsall.push(products);
                localStorage.setItem('productsall', JSON.stringify(productsall));
                $("table tbody").prepend(`
                    <tr>
                        <td class="nomprotd">${prproduct}</td>
                        <td>${prcant}</td>
                        <td>${prtotal}</td>
                        <td><button type="button" class="btneliminar btn btn-outline-danger btn-sm">-</button></td>
                    </tr>`);
            })
    });
</script>