クリックする度にappendchildで「追加、削除」を繰り返しできるようにしたい

Question

ド素人が練習で予約システムを作っています。

空のテーブル内をクリック

<td value="2022-3-1 7:00～8:00"></td>のvalueの値を取得 <div>内に表示する。

まではできたのですが、もう一度クリックしたら表示されたvalueを消す（戻す）という動作を組むことができません。
クリックした場合、toggleを使って<td>内のbg-colorを変化→戻す作業はできましたが、appendchildで出力した方も同じく消える様にしたいです。よろしくお願い致します。

コードの一番下★★★にappendchild記述部分があります。

追加
1度目のクリック　<td>背景に色が付き、<div>内に日時が表示される
2度目のクリック　<td>背景色が消え、<div>内に更に同じ日時が表示される

 <?php
                for($i=0;$i<7;$i++){
                  $week = array( "日", "月", "火", "水", "木", "金", "土" );                 
                  $date = date("n月j日",strtotime("+{$i} day",strtotime($targetDate)))."\n";

                   echo '<th>' . $date . '</th>';
             }
            ?>   
            </tr>

            <?php
                $link = '<a class="day" >〇</a>';

                $keisan =[
               $i - 7,
               $i - 6,
               $i - 5,
               $i - 4,
               $i - 3,
               $i - 2 ,
               $i - 1,
            ];
            
            // 予約時間枠を作る為のfor文
            for($i=7;$i<21;$i++){
    
              echo'<tr>';
              echo '<td>' .$i.':00～'.($i+1).':00 </td>';
              
              foreach($keisan as $k){
                $date = date("y-m-d",strtotime("+{$k} day",strtotime($targetDate)))."\n";
                // $date = date("n月j日",strtotime($targetDate))."\n";
                
                echo '<td class="link1" name="time" value="'.$date.''.$i.':00～'.($i+1).':00"></td>';
              }
                 echo '</tr>';               
              }
           
            ?>
           
           
        </table>

          <div id="kekka">  
                     
          </div>



for(let i = 0; i < link.length; i++){
  link[i].addEventListener('click', function() {
    
    this.classList.toggle('clicked'); 
    const kekka = document.getElementById('kekka');
    const value = link[i].getAttribute('value'); 
    // console.log(value);
   
     // ★★★appendchild
    // クリックしたマスの日付<td value="22-03-19 12:00～13:00>"を表示する↓
    const myp = document.createElement("p");
    const text = document.createTextNode(value);
    myp.appendChild(text);
    kekka.appendChild(myp);
  }) 
}

Answer 1

tdにvalue属性はあまりおすすめできません。カスタムデータの利用を検討ください
kekkaには本当にappendしたいのでしょうか？常に値を上書きしてはいけませんか？

<style>
.active{
  background-Color:aqua;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  let v;
  if(v=t.dataset.value){
    const flg=!t.closest('.active');
    if(flg) document.querySelector('[data-value].active')?.classList.remove('active');
    kekka.textContent=flg?v:'';
    t.classList.toggle('active');
  }
});
</script>
<table border>
<tr>
<th>枠</th>
<th>3/19</th>
<th>3/20</th>
</tr>
<tr>
<td>7:00-8:00</td>
<td data-value="3-18 7:00-8:00"></td>
<td data-value="3-19 7:00-8:00"></td>
</tr>
<tr>
<td>8:00-9:00</td>
<td data-value="3-18 8:00-9:00"></td>
<td data-value="3-19 8:00-9:00"></td>
</tr>
<tr>
<td>9:00-10:00</td>
<td data-value="3-18 9:00-10:00"></td>
<td data-value="3-19 9:00-10:00"></td>
</tr>
</table>
<div id="kekka"></div>

Comments

[退会済みユーザー]

回答ありがとうございます！
カスタムデータというものがあるんですね！
利用してみます！
<td>にvalue属性がおすすめできない理由を、勉強として教えていただきたいですm(__)m

appendについて
・会員プラン（値段）によって月に利用できる回数が決まっている（1回　1時間　例：ゴールド会員＝8回）。
・３日に1回（1時間）を少しずつ消化してもよし、空きがあれば1日に8回使用してもよし。

という様なサービスの予約システムを作りたいと思っているので
「空きがあれば連続で3時間使いたい」という希望された際に、予約行程を少なくしたいと考え、この様な仕組みを希望しています。

とはいえド素人なのでそれが可能なのかどうかも分からずに手を付け始めて今に至りますm(__)m

[yambejp]

> value属性がおすすめできない理由

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes
「value」という属性がHTMLでは特別な意味を持つからです

> appendについて

最大3つまで選べるとかなにか条件があるのでしょうか？

[退会済みユーザー]

value属性について
ありがとうございました！早速data-valueに変更しましたm(__)m

appendについて
まだ条件はつけていません。
現状は、会員プランごとに月間利用回数が設定（DB内）してあり、画面上に「今月はあと○回予約可能です」（例：8回）という数字が表示されています。

枠をクリックするごとに「８→７」と減るようにphp、jsで設定しようと思っています。
（思っているだけです(+o+)）

実際にこの仕組みを使用するかもしれない案件が会員数が40程度に限定された超スモールビジネスの為、とりあえず動けばいいかな…という素人の安易な考えで作り始めてしまいました。
図々しいですが、分からない事があれば質問させて頂きます。勿論自分でも考えながらm(__)m

Answer 2

スマホで打ったので誤字脱字があるかもです。
指摘して頂いたバグを修正しました。

// ★★★appendchild
// クリックしたマスの日付<td value="22-03-19 12:00～13:00>"を表示する↓
const ps = kekka.querySelectorAll("p"); // kekkaのpタグを全て取得
let is_include_value = false;
let ps_index;
// pタグの数ループ
for (let index = 0; index < ps.length; index++) {
    const p = ps[index];
    // pタグのtextがvalueと一致する場合は
    if(p.textContent == value) {
        is_include_value = true; // valueと同じtextのpタグがあればtrue
        ps_index = index; // 何番目の子要素か保存
    }
}

// valueと同じtextのpタグがあれば
if(is_include_value) {
    // 削除処理
    kekka.removeChild(ps[ps_index]);
} else {
    // 新規作成
    const myp = document.createElement("p");
    const text = document.createTextNode(value);
    myp.appendChild(text);
    kekka.appendChild(myp);
}

Comments

[退会済みユーザー]

スマホでご丁寧にありがとうございますm(__)m

試した結果
Cannot read properties of undefined (reading 'add')
at HTMLTableCellElement.<anonymous>が出てきました。

すごく解決しそうに見えるのですが、ド素人の私には分かりません。
勿論自分でも頂いた回答を元に色々と試してみるのでまたお時間があれば返信お願い致します↓↓

for(let i = 0; i < link.length; i++){
～～～～
～～～～
～～～～
～～～～
★★★から下↓の
const myp = document.createElement("p");
const text = document.createTextNode(value);
myp.appendChild(text);
kekka.appendChild(myp);
部分をコメントアウトし、教えていただいたコードを追加（入れ替え）すればいいのでしょうか？

[退会済みユーザー]

classlist.add
↓
classList.addでできました！ありがとうございます！！
ご回答頂いた「誤字脱字」と、エラーの「未定義」がつながりましたm(__)m

[george]

入れ替えすれば大丈夫です。
また、
Cannot read properties of undefined (reading 'add')
at HTMLTableCellElement.<anonymous>
というエラーが出る件ですが、回答に誤字があったため出ていたエラーでした。
回答を修正しましたので新しい回答のコードを入れ替えでしてみてください。

[george]

もう一回脱字を発見したので、修正いたしました。

[退会済みユーザー]

申し訳ありません、ちょっと自分の希望の動きと違っていました！
質問力が足りなかったです！
画像を追加させていただきます。

希望の動きは
１，クリックしたら<td>のvalueが下に表示される
２，他のマスをクリックしたら、そのマスのvalueが更に１の下に表示される

ここまで　1,2と、二つの<p>が表示されている & マスが青くなっている状態

３，１を再度クリックすると、マスの色が戻り、１の<p>も消える

という様な形にしたいです。
何度も申し訳ありませんが、よろしくお願い致しますm(__)m

という動きにしたいと思っています。

[george]

もう一箇所脱字があったため、解答を修正致しました。

[george]

こちらこそすみません。
質問の実装したい挙動の解釈が間違っていました。
画像助かります。

[退会済みユーザー]

画像2つ目の様に、2つ目をクリックすると、1つ目の<p>が消えてしまいます。
※黄色はただのマウスホバーなので関係ありません。

マスをクリック
色が水色に変わる　＆　<td>内のvalueが<p>で表示される

他のマスをクリック
色が水色に変わる　&　最初の<p>の下に2つ目の<p>が追加される

水色のマスをクリック
空白に戻る　&　<p>が消える

という感じが希望です。何度も申し訳ありません、お時間がある時で構いませんのでまたよろしくお願い致しますm(__)m

[george]

回答を編集いたしました。
デバッグしてないのでバグがあるかもしれません。その場合はまた連絡お願いします。

[退会済みユーザー]

何度もありがとうございます！

試してみたところ、エラーが出ました。

Uncaught TypeError: ps.removeChild is not a function
at HTMLTableCellElement.<anonymous> (yoyaku2.php?date= 2022-03-15:333:8)

今回はタイプミスではないと思うのですが…
removeChildの引数でしょうか？

素人の為全く分かりません(T_T)

[退会済みユーザー]

できました～！！！

ps.removeChild(ps[ps_index]);
これが↓↓
kekka.removeChild(ps[ps_index]);
で動きました!(^^)!

親.removeChild（消される子）　という使い方なんですね！

大変勉強になりましたm(__)m自分ではこのfor文とif文はとても組めません。
if文の中のlengthの使い方等が意味不明だったのですが、長さではなくＰの数なんですねｗ
3時間にらめっこして少しづつ解読できてきましたｗ

[george]

すみません
ps.removeChild(ps[ps_index]);
が間違っている事に指摘されて気づきました。
こちらこそ勉強になりました。
ありがとうございました。