（2022.1.18 記）
「”削除フラグ”が立っているデータはリスト表示時に初期で非表示にし、表示ボタンを押すと表示されるようにしたい」という要望があったので実装た時の忘備録です。
簡単に言うと、以下のような動きをするやつです。
＜初期表示＞
＜表示ボタンを押すと・・・＞
＜非表示ボタンを押すと→初期表示へ＞
表示/非表示させる範囲やタイミングを変えれば、色々応用できると思います。
（全行程の所要時間：コピペで終わり）
目次
０．実行環境
■実行環境
・さくらVPN（メモリ：１GB、CPU：２コア、SSD：１００GB）
・LinuxOS：Ubuntu18.04
・Apache：2.4
・MySQL：5.7
・PHP：7.2
１．実装方法
①以下の文を<script>タグで囲ってあげて、</body>の直前にコピペ
//コンテンツの非表示
function hideItem() {
document.getElementById('text1').style.display = "none"; //テキストエリアの非表示
document.getElementById('hide').style.display = "none"; //非表示ボタンの非表示
document.getElementById('disp').style.display = ""; //表示ボタンの表示
}
//コンテンツの表示
function dispItem() {
document.getElementById('text1').style.display = ""; //テキストエリアの表示
document.getElementById('hide').style.display = ""; //非表示ボタンの表示
document.getElementById('disp').style.display = "none"; //表示ボタンの非表示
}
上記をコメント分を除いて１行目から説明すると・・・
１：引数、帰り値無しの関数定義
２：IDが"text1"の要素について、「style="display:none;"」を付与（非表示にする）
以下同文です。
「display=""」にすると、表示するという意味になります。
「dispItem()」も同様ですね。
表示ボタン、非表示ボタンに、それぞれ上記の関数を割り当てることで、処理が流れるようにします。
②HTMLを書き記す
<textarea id="text1" style="display: none;">表示されてるよー</textarea><br /><br /><br /> <button id="hide" onclick="hideItem(); return false;" style="display: none;">非表示</button> <button id="disp" onclick="dispItem(); return false;" >表示</button>
上記をコメント分を除いて１行目から説明すると・・・
１：テキストエリアの定義（式で非表示）（<br />は改行の意）
２：非表示ボタンの定義（初期で非表示）→クリックイベントを列記
３：表示ボタンの定義→クリックイベントを列記
それぞれのボタンを押すと、それぞれのボタンに記載の「onclick」処理が走ります。
以上。
２．最後に
これらを応用して、行番号をonclickの関数に引数と渡して～とかうまいことすればいい感じに冒頭の仕様通りに作れます。
<div>タグで囲えばその範囲、<tr>ならそのテーブルの範囲、<td>ならその行の範囲など、idなど特定の要素が判定できる場所の大抵のところであればコントロール可能です。
また、ただのスクリプトなので、ボタンでなくても何かのタイミングで関数が起動するように書けばいかようにもできますね。
所定位置までスクロールしたら、とか、何秒たったらとか、etc... いろいろできます。
以上。
（不明点あればコメント頂ければ、可能な限りお答えします。）
