Renderisado de Pruductos. Mi problema es que quiero eliminar solamente un articulo de mi render cuando pongo e boton click, osea borrar los datos de ese solo en LocalStorage para que ya no lo renderize y no encuentro la vuelta alguien me ayuda?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Precios</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<script type="text/javascript" src="JS/precios.js"></script>
<style type="text/css">
body {
background-color: #CACACA;
}
</style>
</head>
<body>
<!-- Clon -->
<template id="templattee">
<div class="precio__clone">
<span data-tipo class="tipo__clone">Producto: Precio: $ </span>
<input type="button" class="input" value="Eliminar"/>
</div>
</template>
<!-- Fin del Clon-->
<script type="text/javascript" src="JQUERY/jquery.js"></script>
</body>
</html>
Javascript:
function iniciar()
{
//Crear nuevos Productos
$(".agregarProducto").on("click", agregarProduct);
Cliente.getAll().forEach(function(client) {
client.render();
});
$(".input").on("click", function () {
//Aca estaría la función de eliminar
})
}
function Cliente(names, buy) {
this.names = names;
this.buy = buy;
this.render = function () {
var template = document.querySelector('#templattee');
var clone = document.importNode(template.content, true);
clone.querySelector(".tipo__clone").innerHTML = "Producto: " + this.names + " | Precio: $" + this.buy;
$("body").append(clone);
};
this.save = function() {
var clients = Cliente.getAll();
clients.push(this);
localStorage.setItem("products", JSON.stringify(clients));
};
}
Cliente.getActual = function () {
names = document.getElementById("names").value;
buy = document.getElementById("buy").value;
return new Cliente(names, buy);
};
Cliente.getAll = function () {
var items = localStorage.getItem("products");
var clients = JSON.parse(items);
var clientList = [];
if(clients === undefined || clients === null)
return clientList;
for(var i = 0; i < clients.length; i++) {
var client = clients[i];
clientList.push(new Cliente(client.names, client.buy));
}
return clientList;
}
function agregarProduct() {
var cliente = Cliente.getActual();
cliente.save();
cliente.render();
}
window.addEventListener("load", iniciar, false);
