OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I animate sidebar items sliding up when an item is deleted?

  • Thread starter Thread starter goalTosin
  • Start date Start date
G

goalTosin

Guest
I am trying to create a sidebar with a list of items. When an item is deleted, I want the remaining items to slide up smoothly to fill the space left by the deleted item. How can I achieve this?

This is my code:


Code:
document.addEventListener("DOMContentLoaded", function () {
   const deleteButtons = document.querySelectorAll(".del");

   deleteButtons.forEach((button) => {
      button.addEventListener("click", function () {
         const item = this.parentElement;
         item.classList.add("deleting");
         item.addEventListener("transitionend", function () {
            item.remove();
         });
      });
   });
});

Code:
.sidebar {
   width: 250px;
   background-color: #f0f0f0;
   padding: 10px;
   border-right: 1px solid #ccc;
   border-radius: 10px;
}

.item-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

.item {
   background-color: #fff;
   margin: 5px 0;
   padding: 10px;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.item.deleting {
   transform: translateY(-100%);
   opacity: 0;
   border: none;
}

.del {
   background-color: #ff6666;
   border: none;
   color: white;
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 9999px;
   transition: background-color 0.3s;
}

.del:hover {
   background-color: #ff3333;
}

Code:
<div class="sidebar">
   <ul class="item-list">
      <li class="item">item 1 <button class="del">Delete</button></li>
      <li class="item">item 2 <button class="del">Delete</button></li>
      <li class="item">item 3 <button class="del">Delete</button></li>
      <li class="item">item 4 <button class="del">Delete</button></li>
      <li class="item">item 5 <button class="del">Delete</button></li>
      <li class="item">item 6 <button class="del">Delete</button></li>
      <li class="item">item 7 <button class="del">Delete</button></li>
      <li class="item">item 8 <button class="del">Delete</button></li>
      <li class="item">item 9 <button class="del">Delete</button></li>
      <li class="item">item 10 <button class="del">Delete</button></li>
   </ul>
</div>

While the deleting item moves up, the other items don't immediately move to fill its space until the item is deleted. How can I make sure that the other items move up to fill its space while the item is moving up?

<p>I am trying to create a sidebar with a list of items. When an item is deleted, I want the remaining items to slide up smoothly to fill the space left by the deleted item. How can I achieve this?</p>
<p>This is my code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function () {
const deleteButtons = document.querySelectorAll(".del");

deleteButtons.forEach((button) => {
button.addEventListener("click", function () {
const item = this.parentElement;
item.classList.add("deleting");
item.addEventListener("transitionend", function () {
item.remove();
});
});
});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.sidebar {
width: 250px;
background-color: #f0f0f0;
padding: 10px;
border-right: 1px solid #ccc;
border-radius: 10px;
}

.item-list {
list-style-type: none;
padding: 0;
margin: 0;
}

.item {
background-color: #fff;
margin: 5px 0;
padding: 10px;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 10px;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.item.deleting {
transform: translateY(-100%);
opacity: 0;
border: none;
}

.del {
background-color: #ff6666;
border: none;
color: white;
padding: 5px 10px;
cursor: pointer;
border-radius: 9999px;
transition: background-color 0.3s;
}

.del:hover {
background-color: #ff3333;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="sidebar">
<ul class="item-list">
<li class="item">item 1 <button class="del">Delete</button></li>
<li class="item">item 2 <button class="del">Delete</button></li>
<li class="item">item 3 <button class="del">Delete</button></li>
<li class="item">item 4 <button class="del">Delete</button></li>
<li class="item">item 5 <button class="del">Delete</button></li>
<li class="item">item 6 <button class="del">Delete</button></li>
<li class="item">item 7 <button class="del">Delete</button></li>
<li class="item">item 8 <button class="del">Delete</button></li>
<li class="item">item 9 <button class="del">Delete</button></li>
<li class="item">item 10 <button class="del">Delete</button></li>
</ul>
</div></code></pre>
</div>
</div>
</p>
<p>While the deleting item moves up, the other items don't immediately move to fill its space until the item is deleted. How can I make sure that the other items move up to fill its space <strong>while</strong> the item is moving up?</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top