title: How can I render two columns of cards, and dynamically remove cards?
body: <p>I have an array of song objects that I'd like to display as options to add to a playlist. I'm currently rendering them as two columns side by side, using .each_slice(2). However, when I add a song to a playlist, I'd like to refresh the page and re-render the columns, but without the song. The Model and Controller all work fine, and the songs are being added, but I just can't figure out how to get it to render how I'd like it to.</p>
  <pre><code>&lt;h1 class=&quot;text-white&quot;&gt;Edit Playlist&lt;/h1&gt;
  &lt;div id=&quot;songs&quot; class=&quot;d-flex flex-nowrap&quot;&gt;
    &lt;% @user.songs.each_slice(2) do |song1, song2| %&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;div class=&quot;row mt-3 mb-4 d-flex&quot;&gt;
          &lt;% unless @playlist.songs.include? song1 %&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;div class=&quot;card text-center bg-black&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;%=image_tag(song1.image, size: &quot;100x100&quot;) %&gt;
                &lt;h5 class=&quot;card-title mt-3&quot; style=&quot;color: rgb(35, 215, 96)&quot;&gt;&lt;%=&quot;#{song1.name}&quot; %&gt;&lt;/h5&gt;
                &lt;p class=&quot;card-text &quot; style=&quot;color: rgb(35, 215, 96)&quot;&gt;&lt;%=h truncate(&quot;#{song1.artist}&quot;, :length =&gt; 120) %&gt;&lt;/p&gt;
                &lt;div class=&quot;mt-auto&quot; style=&quot;background: black&quot;&gt;
                  &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Popularity: &lt;%=&quot;#{song1.popularity}&quot; %&gt;&lt;/small&gt;&lt;/p&gt;
                  &lt;a href=&quot;add/&lt;%=&quot;#{song1.id}&quot; %&gt;&quot; class=&quot;btn btn-lg&quot; style=&quot;background: rgb(35, 215, 96)&quot;&gt;Add Song&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;% end %&gt;
          &lt;%if song2 %&gt;
            &lt;% unless @playlist.songs.include? song2 %&gt;
              &lt;div class=&quot;col-sm-6&quot;&gt;
                &lt;div class=&quot;card text-center bg-black&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                    &lt;%=image_tag(song2.image, size: &quot;100x100&quot;) %&gt;
                      &lt;h5 class=&quot;card-title mt-3&quot; style=&quot;color: rgb(35, 215, 96)&quot;&gt;&lt;%=&quot;#{song2.name}&quot; %&gt;&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot; style=&quot;color: rgb(35, 215, 96)&quot;&gt;&lt;%=h truncate(&quot;#{song2.artist}&quot;, :length =&gt; 120) %&gt;&lt;/p&gt;
                    &lt;div class=&quot;mt-auto&quot; style=&quot;background: black&quot;&gt;
                      &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Popularity: &lt;%=&quot;#{song2.popularity}&quot; %&gt;&lt;/small&gt;&lt;/p&gt;
                      &lt;a href=&quot;add/&lt;%=&quot;#{song2.id}&quot; %&gt;&quot; class=&quot;btn btn-lg&quot; style=&quot;background: rgb(35, 215, 96)&quot;&gt;Add Song&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
              &lt;% end %&gt;
          &lt;%end %&gt;
    &lt;% end %&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I tried it with the <code>&lt;% unless @playlist.songs.include? song1 %&gt;</code> line, for example, but it ends up leaving empty blocks in the columns.</p>