How to use CSS animations to remove an element from the DOM

Question

How to use CSS animations to remove an element from the DOM

My website has a structured HTML layout with product containers and individual products. I also have a JavaScript function that can remove any product from the page.

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

I am looking for a way to enhance the user experience by fading out the deleted product div as it moves to the right, while animating the other products to fill in the empty space.

css

Answer 1

Answer №1

An easy illustration

const button = document.querySelector('button');
const productsContainer = document.querySelector('.products');
const productsList  = document.querySelectorAll('.product');

productsList[0].addEventListener('transitionend', function() {
  [...productsList].forEach((product) => product.parentNode.removeChild(product))
});

button.addEventListener('click', function() {
  this.setAttribute('disabled', 'disabled');
  productsContainer.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 item/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>

Description: upon clicking the button, the class .products--delete gets applied to the .products_container element triggering a CSS transition on the .product items.

Subsequently, when the transitionend event is detected on an individual product item, all products are removed from the DOM.

Answer 2

An easy illustration

const button = document.querySelector('button');
const productsContainer = document.querySelector('.products');
const productsList  = document.querySelectorAll('.product');

productsList[0].addEventListener('transitionend', function() {
  [...productsList].forEach((product) => product.parentNode.removeChild(product))
});

button.addEventListener('click', function() {
  this.setAttribute('disabled', 'disabled');
  productsContainer.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 item/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>

Description: upon clicking the button, the class .products--delete gets applied to the .products_container element triggering a CSS transition on the .product items.

Subsequently, when the transitionend event is detected on an individual product item, all products are removed from the DOM.

Answer 3

Answer №2

Utilizing CSS transitions can enhance your design. The process of removing elements might vary based on your specific needs. Simply select the product you want to remove.

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 4

Utilizing CSS transitions can enhance your design. The process of removing elements might vary based on your specific needs. Simply select the product you want to remove.

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 5

Answer №3

Although CSS lacks the capability to manipulate objects like JavaScript, you can still achieve this task effortlessly.

$(".item").fadeOut("slow", 0.00, function(){
    $(this).slideUp("slow", function() {
         $(this).remove();
    });
});

Answer 6

Although CSS lacks the capability to manipulate objects like JavaScript, you can still achieve this task effortlessly.

$(".item").fadeOut("slow", 0.00, function(){
    $(this).slideUp("slow", function() {
         $(this).remove();
    });
});

How to use CSS animations to remove an element from the DOM

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to ensure my hover caption spans the entire size of the image?

Styling with CSS: Changing the Background Color of Text

Netlify deployment is failing to display the CSS styling on a website built with Hugo

Only the initial external CSS ID is functional, while the second one is inactive

Is there a way to place my searchbox in the top right corner of the page?

modify the appearance of HTML controls in real time with C#

Utilizing SASS, JavaScript, and HTML for seamless development with Browser Sync for live syncing and

Showing information to several classes using JavaScript

Mouse click failing to trigger CSS property update

The menu field remains open even after clicking on the menu

Prevent elements from collapsing within the Bootstrap 5 grid system

Incorporate Zurb Foundation seamlessly into your current codebase without causing any

What is the best way for me to locate and access the initial element that has been assigned the

What could be causing this addEventListener to fail when I am assigning elements to a class?

What are some effective strategies to ensure my header is aligned properly on both mobile and desktop platforms?

The car glides smoothly across the screen from left to right before disappearing from view

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

Is it necessary to use a specific button to submit on Return (Enter)?

The vertical-align property in CSS seems to be malfunctioning

Styling your printed documents in Next.js 10