Javascriptで要素を完全に削除したい【Rails6】

Question

前提・実現したいこと

rails6にてtodoアプリを作っています。javascriptにて、クリックした要素からidを取得し、それに紐付けられた親要素を削除する機能を実装しています。javascriptの動作自体は望んだ通りに動いて、要素の削除も行えます。しかし、ページを更新すると元に戻ってしまいます。ビューファイルでeachメソッドを使って要素を生成している以上、ページが更新された時に元通りになるというのは分かります。railsに備わっているdestroyアクションで消せば良いのではと思いますが、事情があってデータの削除はしたくありません。そこで、何か良い方法がないか教えて頂けると幸いです。

発生している問題・エラーメッセージ

・一度消した要素が、ページ更新で元に戻ってしまう様子

・全体ビュー画面

赤枠と青枠の部分はそれぞれeachメソッドを使用して保存されているデータを表示しています。今回は、赤枠の部分の要素は消えても、青枠の部分の要素は残っていて欲しい（つまり赤枠部分の処理ではデータ自体を消したくなくて、データを消すなら青枠内の削除ボタンを押して削除する）ということです。

該当のソースコード

赤枠に表示させている部分（index.html.erb）

<% d = Date.today%>
<div class="countdown">
  <div class="todo-countdown">
    <% @events.each do |event| %>
      <% if event.category_id == 2 && d <= event.event_date %>
        <% cut_day = "#{event.event_date - d}" %>
        <% cut_day_num = cut_day.length - 2%>
        <% last_day = cut_day.slice(0, cut_day_num).to_i %>
        <% if last_day <= 3 %>
          <div class="countdown-zone-red" id="box_todo_id_<%= event.id %>" >
            <div class="countdown-zone-date">
              <%= "残り #{last_day} 日！"%>
            </div>
            <div class="countdown-zone-title">
              <%= event.title %>
            </div>
            <div class="done-box" id="todo_id_<%= event.id %>">
              <div class="done-zone">
                Done!
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    <% end %>
  </div>
</div>

ややこしいので、each do以降の記述について、少し説明させて頂きます。まず、１つ目のifで『category_idの値が「２」であるか（予定は「１」、todoは「２」で設定しています。todoのみ表示させるためにこの記述をしています）』『現在より未来のtodoであるか』という条件分岐をしています。次のifで「todoの日付ー今日の日付」が１４日以内であるか」という条件分岐をしています。
そして、要素を特定するために親要素（削除したい要素）、子要素（クリックイベントを起こしたい子要素）にevent.idを利用してそれぞれ唯一のidを指定しています（親要素のidは"box_todo_id_<%= event.id %>"で、子要素のidは"todo_id_<%= event.id %>"となっていて、少し違います）

青枠部分のコードは直接関係なさそうなので、割愛させて頂きます。（必要あれば言ってください）

続いてJavascriptファイル（countdown.js）のコードです

window.addEventListener('load', function(){
  const todo_num = document.querySelector('.done-box').id;
  const box_num = "box_" + todo_num;

  const target = document.getElementsByClassName('done-box');
  for(let i = 0; i < target.length; i++){
    target[i].addEventListener('click', (event) => {
      if (document.querySelector('.countdown-zone-red').id === box_num ) {
        console.log(target[i].id);
        const delete_box = document.getElementById('box_' + target[i].id);
        if(window.confirm('完了しても良いですか？')) {
          delete_box.remove();
        }
      }
    }, false);
  }
})

考えられる仮説

現在category_idはActiveHashにて管理しています。

class Category < ActiveHash::Base
  self.data = [
    { id: 1, name: '予定' },
    { id: 2, name: 'Todo' },
  ]
end

これを

class Category < ActiveHash::Base
  self.data = [
    { id: 1, name: '予定' },
    { id: 2, name: 'Todo' },
    { id: 3, name: '完了ずみTodo' },
  ]
end

などとすると、条件分岐で上手いこと赤枠・青枠に表示できると考えています。したがって、もし、javascriptでカラム（category_id）の値を'2'→'3'に変更して保存できるような方法があれば教えて頂きたいです。そして、javascriotを用いなくても処理はできると思いますが、「Done!」ボタンを押した時に付箋をベリっと剥がすようなモーションをどうしても付けたいので、cssを工夫すればできるよなどと言った情報でも構いません。現在このアプリは同時にデプロイしているので、DBはあまり触りたくないという気持ちが正直な所で、この方法を試せずにいます。良い方法があれば、ご教授ください。よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

Raisのバージョン 6.0.0
必要な情報あれば遠慮なくお伝えください。

Comments

[m.ts10806]

要件が複数あるように見受けられます。議題を絞ってください。

[tekeTECH]

コメントありがとうございます。要件がごちゃごちゃしていてすみません。様々な角度から方法を見つけたいと思って、このような質問をさせて頂いています。個人的には「考えられる仮説」に書いてある通り、category_idを増やして分岐させることが一番現実的だと思っています。これを踏まえて課題を絞るなら「Doneボタンをクリックすると、category_idが変更・保存される処理」を実現したいという課題にさせて頂きます。よろしくお願い致します。

[退会済みユーザー]

では、そのように質問を編集してください。
ピンポイントな質問の方が回答者の目にとまりやすいし、素早く的確な回答を得られる可能性が高まりますよ。

[tekeTECH]

ご指摘ありがとうございます。様々な視点で見て頂きたくて今回のような質問になってしまいましたが、タイトルと質問内容に齟齬があって確かに分かりにくいものだということを痛感しました。今回の問題に関しては自己解決できましたので、今後の質問作成に役立てたいと思います。

Answer 1

サーバーサイドのデータを変更せずにユーザー操作を記憶させておきたい場合は、クッキーやセッションストレージ、ローカルストレージでクライアントサイドに記憶させます。JSで可能です。

Comments

[tekeTECH]

アドバイスありがとうございます。自分では思いつかなかった方法なので、とても参考になりました。今回は、間違ってリストから削除してしまった時も踏まえて、仮説通りに「category_id」を増やし、ワンクリックでcategory_idを変えることで表示させなくする方法で解決しました。クッキーに関するJSの記述の仕方も調べさせて頂きました。今後どこかで活用できるかと思います。問題解決に向けて自分の引き出しを広げることができたので、こちらの回答をベストアンサーとさせて頂きます。ありがとうございました。

Answer 2

結論

表面上だけではなく内部でどう言った処理をしているかを想像すればおのずと答えは見えてくる。

詳しい回答

countdown.jsで何をやってるのか考えてみましょう。

// 読み込み時に、第二引数の無名関数を実行
window.addEventListener('load', function(){

  // 定数todo_numに、done-boxのClassを持つ最初の要素のIDを入れる
  const todo_num = document.querySelector('.done-box').id;

  // 定数box_numに、box_と、定数todo_numを文字列連結したものを入れる。
  const box_num = "box_" + todo_num;

  // 定数targetに、done-boxのClassを持つ要素すべてを入れる。
  const target = document.getElementsByClassName('done-box');

  // 繰り返し
  for(let i = 0; i < target.length; i++){

    // 定数targetのi番目の要素がクリックされたら第二引数を実行
    target[i].addEventListener('click', (event) => {

      // もし、countdown-zone-redのClassを持つ最初の要素のIDと、定数todo_numの値が一緒なら
      if (document.querySelector('.countdown-zone-red').id === box_num ) {

        // console.logに、クリックされた要素のIDを出力
        console.log(target[i].id);

        // delete_boxに、box_とクリックされた要素のIDを連結したIDに該当する要素を入れる
        const delete_box = document.getElementById('box_' + target[i].id);

        // 「完了してよいですか？」と聞く
        if(window.confirm('完了しても良いですか？')) {

          // 要素を削除する
          delete_box.remove();
        }
      }
    }, false);
  }
})

これのどこに、ActiveHashから削除する記述があるでしょうか。
削除して見えるのは、要素をHTML上から削除しただけです。
ActiveHashから削除したわけではないです。

なので、ActiveHashをいじるのもよいですしほかの方法もあります。
結局のところクライアントブラウザがリロードしても削除されない方法で「削除」という操作を保存すればよいでしょう。

Comments

[tekeTECH]

ご指摘ありがとうございます。JS記述に関して１つ１つ詳しくコメントもして頂き、ありがとうございました。自分の質問の仕方が悪かったなと痛感しております。しかし、「要素をHTML上から削除しただけ」という言葉がとても印象に残りました。HTMLの操作とデータの操作を曖昧にしていた自分に気づかされました。高評価の方、させて頂きました。ありがとうございました。