クリック時に生成したものを削除することは可能でしょうか？

Question

現在共有ボタンを作成中で、クリックすると SNSシェアリンクとテキストボックス（中にページURL）とページURL をコピーするボタンをポップアップで表示させ、✕ボタンで閉じる機能を作成しております。
ポップアップ時に生成しているため共有ボタンをクリックするたびに追加されてしまい困っております…
ポップアップを閉じる時に削除するという方法で改善できるのではないかとアドバイス頂いたのですが、1回目のポップアップの時点で生成予定のものが消えてしまいます。
コードをどのように修正すれば良いでしょうか？

※ 該当コード
https://wandbox.org/permlink/tOIPsHFR0IlYikVb

fujillin · Accepted Answer

No3です。

>コードは短縮した方が良いでしょうか？
ご自身がわかりやすい方法で良いと思いますが、何でも一度変数化していると、数が多くなるとどの変数が何を意味しているのか分かりにくくなってきます。
グローバルでこのような変数が多数あると、わかりにくくなってきます。
スコープ内で消費できる変数は、スコープ内に納まるような考え方の方が、わかりやすくなると思います。
（個々のスコープで、機能的に独立できるような考え方）

例えば、ご提示のスクリプトでも
＞const textboxHref = location.href;
＞let url = location.href
と同じ内容を、別の変数に代入しているのは無駄に思えます。

また、jQueryを読み込んでいるようですが、最後の数行を除いて、ほとんど利用していませんよね？
（読み込み手間をかけながら、利用しないというのは不可思議）
イベントのバインドも、「addEventListener」であったり「onclick」であったりと一貫性が感じられません。
ご提示のスクリプトに限って言えば、「textContent」と「innerHTML」も同様です。

要素取得のためだけに、jQueryを読み込むのであれば、例えば自前で
　const QS = s => document.querySelector(s);
のような関数を定義しておけば、読み込みは不要になりますし、「要素を取得する関数」とだけ覚えておけば、個別に要素の変数を多数作成するよりもわかりやすくなる可能性がありますし、スクリプトも全体的に短縮化が可能です。
（jQueryに慣れているなら、関数名を$にしておいてもよい）

短い構文が必ずしも良いわけではありませんけれど、複雑にならない程度に短縮できるのなら、目視で追う上では視認性が上がる可能性はあります。
どちらがわかりやすいかは人にも寄るので、当面はご自身がわかりやすい記述にしておくのが良いのではないでしょうか。

fujillin · Answer

No2です。

＞現在のページのURLを取得するコードでエラーが発生しており
＞どうすべきか分かりません…
エラーメッセージをしっかり読みましょう。

「取得するコード」ではなく、セットする際のエラーではありませんか？
しかも、
＞ Cannot set properties of null (setting 'value')
　「null値に属性（=value）を設定できません」
という内容ですので、要素の取得ができておらず、null値になっているものと推測できます。

スクリプトが長すぎて、却って読みにくいのですが、要素取得時のセレクタが間違っているものと思われます。
＞document.querySelector("scope-renderer");
はタグ名を探しますが、クラス名で検索したいのではありませんか？

なお、ご質問には関係ありませんけれど、処理手順として、
　要素の変数 = document～～～;
　内容 の変数= 実際の内容;
　要素の変数.value = 内容の変数;
全体的に上記のような方法を取っていらっしゃいますが、それぞれの内容を一度変数に代入してから使用するという手順になっています。
しかしながら、一回の処理に一度しか使用しない内容ですので、直接代入するようにしてしまえば、行数としては1/3程度（文字数は1/2くらいか？）にできると思われます。

例えば、上記であれば
　document～～～.value = 実際の内容;
の1センテンスで済ませられます。

※ 何度も繰り返して使用する場合は、後者の方がごくわずかに遅い可能性がありますが、大量に処理をしているわけではないので、差はないと考えても良いでしょう。

fujillin · Answer

こんばんは

ご提示のスクリプトは追加するのみの内容なので、
＞1回目のポップアップの時点で生成予定のものが消えてしまいます。
をどのようにして実現しようとしているのか不明です。
ですので、修正点と言われてもわかりませんけれど・・

普通に、Xマークをクリックした際の「閉じる」処理の中に、追加した要素を削除する処理を加えておけば良いのではありませんか？

とは言うものの・・
毎回、同じ要素を作成したり削除したりすることになるので、無駄な処理を行っているように思われます。
最初からテンプレート内にHTMLで要素は記述しておいて、異なる部分（＝inputの値）だけを書き換えるような仕組みにしておけば、生成・追加するスクリプトも削除するスクリプトも不要になると思います。
そうすることで、「増えてしまう」とか「削除しなければならない」などということも考える必要が無くなるのではないでしょうか。

ぷらぐろまあ · Answer

ChatAIに質問することをお勧めします。

クリック時に生成したものを削除することは可能でしょうか？

No3です。

No2です。

こんばんは

ChatAIに質問することをお勧めします。

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング