Rails: リソースの一括登録画面: 6: 登録グループの削除

前回の続きです。今回はRemoveボタンを画面に配置して、アカウントの登録数を減らせるようにします。追加ボタンと同様に今回のボタンもリンクで実装しておいて、後日スタイリングをアイコンボタンに変更したいと思います。

削除ボタン

自分自身の要素を削除するStimulusのコントローラーを作成します。

bin/rails generate stimulus element-removal

app/javascript/controllers/element_removal_controller.js
remove()が呼ばれたら自分自身を削除します。

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="element-removal"
export default class extends Controller {
  remove() {
    this.element.remove()
  }
}

app/views/bulk_accounts/_account.html.erb
コントローラーとアクションを記述します。

<%= tag.div data: { controller: "element-removal" }, class: "py-2 px-3 mb-5" do %>
  <a data-action="element-removal#remove">Remove</a>
  <%= fields_for "accounts[]", account do |account_fields| %>
    <%= render "bulk_accounts/account_text_field", account: account, account_fields: account_fields, key: :name %>
    <%= render "bulk_accounts/account_text_field", account: account, account_fields: account_fields, key: :email %>
  <% end %>
<% end %>

課題

子要素が1つの場合は削除ボタンを表示しない。
アイコンボタンに変更する。

以上です。

続きを書きました。