js.erbでHTML要素の削除ができなかった

はじめに

ToDoアプリ作成中に非同期処理を実装中、HTML要素の削除に手間取ってしまいました。いくつか方法があるみたいなので書き残します。

実現したかったこと

作成したToDoの編集ボタンを押すとToDoがカーソル入力状態になり、編集ボタンは一旦消えることです。
以下では、editリンク内にペンのアイコンを表示しています。

app/views/tasks/edit_link.html.erb

<%= link_to edit_task_path(task), class: "btn", id: "edit-task_#{task.id}", remote: true  do %>
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<% end %>

以下はコントローラーです。
js.erbのviewを呼び出しています。

app/controllers/tasks_controller.rb

def edit
  respond_to do |format|
    format.js { render locals: { task: @task } }
  end
end

そしてjs.erbファイルでeditリンクのHTMLを消そうとしています。

app/views/tasks/edit.js.erb

$("#edit-task_<%= task.id %>").html("");

しかし、この書き方ではペンのアイコンの表示が消えるだけで、リンクのボタンはそのまま残ってしまいました。

原因

.html("");という記述は、指定した要素の子要素を削除する処理だから。
つまり以下の記述ではspan要素のみ削除されてしまいます。

app/views/tasks/edit_link.html.erb

<%= link_to edit_task_path(task), class: "btn", id: "edit-task_#{task.id}", remote: true  do %>
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<% end %>

補足として、`$(要素).empty();'とした場合も同じです。

解決策

remove()を使用する。

app/views/tasks/edit.js.erb

$("#edit-task_<%= task.id %>").remove();

remove()は指定した要素自体を削除してくれます。
これで期待通りの動きになりました。