Multiple Checkbox Select & Delete In Rails

Are you new to Rails or learning just enough to throw something together that works? In your newness or laziness did you create a bunch of records that you need to delete and the only thing you know how to do is remove them one at a time or do something tacky like manually remove them straight from the database?

Well, there’s a top secret way to select a group of records and delete them all at once!

OK, so it’s not top secret.

However, I am going to show you how to select multiple checkboxes in Rails and delete all of the selected records at once. It’s a feature we've all come to know and love using our favorite web apps. So let’s get started.

Aight. So, I built a website for adventure travelers and I am working on a new feature where people can answer interview questions about their expeditions and travel adventures. I want to be able to add, remove and hide interview questions in the database from the admin panel (standard stuff I won’t cover in this article). I also want to be able to select some or all of those questions from the admin panel and click a button to delete them.

THE CONTROLLER

The first thing I did was create a new action in the questions controller that would destroy all of the records passed to the question_ids parameter and then refresh the questions index page when finished.

In admin/questions_controller.rb

 def destroy_multiple
    Question.destroy(params[:question_ids])
    respond_to do |format|
      format.html { redirect_to admin_questions_url }
      format.json { head :no_content }
    end
  end

THE ROUTE

Next, I created a route for our new destroy_multiple action. If you miss adding the route, your delete button won’t work and you’ll get a nasty error that may or may not ruin your day…

It probably won’t ruin your day… but you won’t like it.

In config/routes.rb add the code below to your resource.

 resources :questions do
    collection do
      delete 'destroy_multiple'
    end
  end

SELECT ALL

The select all feature was more of an after thought for me. I could select the checkboxes one at a time and click the delete button but I did’t want to go down the list and manually check a bunch of boxes. So I went on a hunt for the easiest way I could click something to select all of the checkboxes. I stumbled upon a sweet little gem called Select_All-Rails.

In your Gemfile add the following and run the bundle command to install it.

gem 'select_all-rails'

In assets/javascripts/application.js (or wherever your assets are for your admin panel).

//= require select_all.js

At the end of the same file add the following:

$(function() {
  $("#selectAll").select_all();
});

THE VIEW

Now that you've setup all the magic on the backend, it’s time to make all your hopes and dreams come true on the frontend.

In admin/questions/index.html.erb

<%= form_tag destroy_multiple_admin_questions_path, method: :delete do %>
<table class="footable table table-bordered toggle-arrow-tiny" data-page-size="31" data-filter=#filter>
<thead>
<tr>
  <th>Active</th>
  <th>Order</th>
  <th>Question</th>
  <th data-sort-ignore="true"><input type="checkbox" id="selectAll"></input></th>
</tr>
</thead>
<tbody>
<% @questions.each do |question| %>
  <tr>
    <td><%= question.active %></td>
    <td><%= question.sort %></td>
    <td><%= question.question %></td>
    <td><%= check_box_tag "question_ids[]", question.id, false, class: 'selectable' %></td>
  </tr>
<% end %>
</tbody>
<tfoot>
<tr>
    <td colspan="12">
 <ul class="pagination pull-right"></ul>
    </td>
</tr>
</tfoot>
</table>
<%= submit_tag "Delete selected", :class => 'btn btn-primary btn-xs' %>
<% end %>

Note: If you use something like Footable and have column sorting enabled, you will need to disable sorting only for the checkbox column. I use Footable so I have left the code intact for your viewing pleasure.

We want to make sure destroy_multiple is the action we want to perform when we click the delete selected button so it needs to go in the url for the form.

I have disabled sorting on the checkbox column for Footable using data-sort-ignore=”true”. This may be different depending on what version of Footable you are using.

One checkbox to rule them all…

The checkbox you use to select all of the other checkboxes must have the sellectAll id.

When you select a checkbox for a record, its id is added to the question_ids parameter which is an array. The third option in the check_box_tag code is the initial checked value and should be set to false. The class name for each record needs to be selectable so the select gem can work its magic.

Don’t forget your delete selected button on the bottom (or wherever you want to put it).

That’s it. Now you can save yourself a few seconds with this new mass delete feature and get back to your game of Sonic the Hedgehog or Tekken or whatever folks are playing these days.

On a side note…I wonder what an updated version of Frogger would be like…

Rails version: 5.0.5

Have you built an “EffyN” (efficient nerd) feature in Rails? How? Let me know in the comments, chat with me on Twitter, LinkedIn or if you are looking to improve your Technical or Business English, subscribe to my newsletter for video mini-courses!