cada vez que agrego un elemento se muestra en el carrito, lo que quiero hacer es que al dar clic en el boton verde, guarde esa linea en la BD(esto ya lo hice) y a la vez que este boton y los botones de (+) y (-) se oculten.
El codigo html que utilicé es este, es de un video
<table class="table" id="tabla-reserva">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Cantidad</th>
<th scope="col">Acción</th>
<th scope="col">Total</th>
<th scope="col">Confirmar</th>
</tr>
</thead>
<tbody id="items"></tbody>
<tfoot>
<tr id="footer">
<th scope="row" colspan="5">Carrito vacío</th>
</tr>
</tfoot>
</table>
<div class="row" id="cards"></div>
</div>
<template id="template-carrito">
<tr>
<th scope="row" class="idproducto">id</th>
<td>Café</td>
<td class="cantidadproducto">S/.1</td>
<td>
<button class="btn btn-info btn-sm">
+
</button>
<button class="btn btn-danger btn-sm">
-
</button>
</td>
<td>S/. <span>500</span></td>
<td><button class="btn btn-success" >✓</button></td>
</tr>
</template>
El codigo js que tengo es este.
const btnAccion=e=>{
//console.log(e.target)
if(e.target.classList.contains('btn-info')){
//carrito[e.target.dataset.id]
const producto=carrito[e.target.dataset.id]
producto.cantidad=carrito[e.target.dataset.id].cantidad+1
carrito[e.target.dataset.id]={...producto}
pintarCarrito()
}
if(e.target.classList.contains('btn-danger')){
//carrito[e.target.dataset.id]
const producto=carrito[e.target.dataset.id]
producto.cantidad--
if(producto.cantidad===0){
delete carrito[e.target.dataset.id]
}
pintarCarrito()
}
if(e.target.classList.contains('btn-success')){
//carrito[e.target.dataset.id]
const producto=carrito[e.target.dataset.id].id
const cant=carrito[e.target.dataset.id].cantidad
var d = new Date();
var dia=d.getDate();
var mes=d.getMonth()+1;
var anio=d.getFullYear();
var fecha=dia+'/'+mes+'/'+anio;
var dni=document.getElementById('Online').innerHTML;
var estado=0;
templateCarrito.querySelector('.btn-success').style.display="none";
//ajax_insert_reserva(dni,producto,cant,fecha,mes,anio,estado);
console.log(dni+'-'+producto+'-'+cant+'-'+fecha+'-'+mes+'-'+anio+'-'+estado)
}
e.stopPropagation()
}
Esas lineas del js, son los eventos que tienen los botones... el ultimo es del boton verde, donde uso ajax para guardar los registros en la BD, solo quiero que por cada uno cuando se de clic se oculte el mismo boton al que le di clic para que guarde el registro, además de los botones de + y - , intenté con jquery, pero no funciona, así que debo hacerlo con vanilla javascript. o si existe otra manera de hacerlo , sería genial. Este codigo, templateCarrito.querySelector('.btn-success').style.display="none"; funciona pero al momento de dar clic al boton y luego a cualquier otro boton del html,pero oculta todos los botones verdes.. pero quiero que por cada linea se oculten los botones