'jquery remove a div and re arrange the following ones with animation

I have a grid of cards with a button to remove each one of them with an animation. I chose to reduce the width to 0 so that the cards to the right (on the same row) slide to the left and occupy the removed card spot. What I would like to achieve is to animate the first element of the following row into the last position of the row above (the one that had the card removed). The best example I can provide is the home page of the Vivaldi browser, where you can remove a speed dial widget and the following ones animate to their new positions.

This example in CodePen is what I have so far.

$(document).ready(function() {
  
  const content = $('#inner-content');
  let listCourses = '';
  
  let courses = [
    { title: 'html' }, 
    { title: 'css' }, 
    { title: 'javascript' }, 
    { title: 'python' }, 
    { title: 'react' }, 
    { title: 'node' }, 
    { title: 'angular' }, 
    { title: 'SEO' }, 
    { title: 'UX/UI' }, 
    { title: 'jQuery' }, 
    { title: 'SQL' }, 
    { title: 'noSql' }
  ]
  
  courses.forEach((course) => {
    let newCourse = `
      <div class="course-container">
        <div class="inner-container">
          <h2>${course.title}</h2>
          <button class="courses-control"> Remove </button>
        </div>
      </div>
    `;
    listCourses += newCourse;
  });

  content.html(listCourses);

  $('.courses-control').on('click', function(e){
    $(this)
      .parents('.course-container').animate({
        'width': '0px',
        'padding': '12px 0px',
        'opacity': '0'}, function() {
          $(this).remove();
        });
  })
});
* {
  box-sizing: border-box;
}
body { font-family: 'lato'; }

#inner-content {
  display: flex;
  flex-wrap: wrap;
}

.centered {
  max-width: 960px;
  margin: auto;
}

.course-container {
  width: 25%;
  padding: 12px;
  overflow: hidden;
}

.inner-container {
  overflow: hidden;
  text-align: center;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 12px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Courses</h1>
  <div id="inner-content" class="centered">
    
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>

</body>
</html>
javascriptjquerycss


Solution 1:[1]

change the forEach loop to have an index and give each button an id:

courses.forEach((course, index) => {
                let newCourse = `
            <div class="course-container">
              <div class="inner-container">
                <h2>${course.title}</h2>
                <button id="${index}" class="courses-control"> Remove </button>
              </div>
            </div>
          `;
                listCourses += newCourse;
            });

Then in the click function after this:

$(this)
                    .parents('.course-container').animate({
                        'width': '0px',
                        'padding': '12px 0px',
                        'opacity': '0'
                    }, function () {
                        $(this).remove();
                    });

add this:

$(`#${Number(this.id) + 4}`).parents('.course-container').animate({
                    'margin-top': '-100px',
                    'z-index': '1',
                    'opacity': '0'
                }, 500, function () {
                    $(this).css({ 'margin': '0px', 'opacity': '1' });
                });

Try it out and tell me what you think...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dovid Brailofsky

Related Questions