CSS animate remove from DOM - css

Question

I have the following HTML structure:
<div class="products-container">
{foreach from=$cart.products item=product}
<div class="product" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
...
</div>
</div>
Now I have a javascript that can remove any div .product.
Is there a way to fade the deleted div out of the DOM to the right and animate the other divs 'moving up to the free space'?

Answer 1

A simple example
let btt = document.querySelector('button');
let products_cnt = document.querySelector('.products');
let products = document.querySelectorAll('.product');
products[0].addEventListener('transitionend', function() {
[...products].forEach((p) => p.parentNode.removeChild(p))
});
btt.addEventListener('click', function() {
this.setAttribute('disabled', 'disabled');
products_cnt.classList.add('products--delete');
})
div {
border: 1px #9bc solid;
height: 60px;
width: 200px;
margin: 10px;
color: #69A;
font: 1em system-ui;
}
button {
margin-bottom: 3em;
cursor: pointer; }
.products {
overflow-x: hidden; }
.product {
font-weight: bold;
transition: transform 1.5s 0s, opacity 1.25s 0s;
transform: translateX(0);
opacity: 1;
}
.products--delete .product {
transform: translateX(100vw);
opacity: 0;
}
<button type="button">Remove product/s</button>
<section class="products">
<div>Not a product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div>Not a product</div>
<div class="product">Product</div>
<div>Not a product</div>
</section>
Explanation: when you click the button the class .products--delete is added to the .products_container element: this starts a CSS transition over the .product elements.
Finally, when the transitionend event occurs on a single product element just remove from the DOM all products.

Answer 2

You can use css transitions in your CSS. The part of removing may be different for you. Please click the product to remove it.
let productsRy = Array.from(document.querySelectorAll(".product"));
productsRy.forEach((p,i)=>{
p.style.top = i * (3 + 1) * 16 +"px";
p.addEventListener("click",()=>{
container.removeChild(p);
productsRy = Array.from(document.querySelectorAll(".product"));
productsRy.forEach((p1,i1)=>{p1.style.top = i1 * (3 + 1) * 16 +"px";})
})
})
.products-container{position:relative;}
.product{
position:absolute;
padding:1em;
margin:.5em;
height:3em;
outline:1px solid; width:200px;
height:auto;
transition: all 1s;
}
}
<div class="products-container" id="container">
<div class="product" data-id-product="a" data-id-product-attribute="a">
product a
</div>
<div class="product" data-id-product="b" data-id-product-attribute="b">
product b
</div>
<div class="product" data-id-product="c" data-id-product-attribute="c">
product c
</div>
</div>

Answer 3

CSS really doesn't have the ability to modify an object in the same manner as JavaScript. you can do this easily.
$(".product").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});