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

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();
         });
      });
   });
});

.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;
}

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