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>