ポップアップウィンドウ（削除ボタン）

はじめに

前回表示に成功したポップアップウィンドウは、リロードしない限りその場に残ったままです。
これでは具合が悪いので、削除ボタンを実装したいと思います。
別ブログにて、書き直したものを公開中です。
https://airesaies.com/2020/09/06/program008/

実行

前回までのコードは次の通りです。

sample.haml.html

.btn
  ボタン
.pop

sample.js

$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window"></div>
   `
   $(".pop").append(html);
 })
});

おさらいすると、let htmlで宣言しているhtmlデータを、.popの下に追加することになります。
まずは、このhtmlデータに、削除ボタンのコードを追加することにします。

sample.js

$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window">
       <div class = "pop__window__delete-btn js-delete-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
});

classが"pop__window__delete-btn js-delete-btn"という風に、
pop__window__delete-btn
js-delete-btn
の2つを指定している事に注意です。

CSSも次のように編集します。

sample.scss

.pop{
  &__window{
    width: 500px;
    height: 500px;
    background-color: 500px;
    position: fixed; 
    top: 300px; 
    left: 300px;
    &__delete-btn{
      width:  50px;
      height: 50px;
      background-color: #FF0;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
  } 
}

こうすれば、表示されるポップアップウィンドウに、黄色い〇ボタンが追加されます。

次に、新しいJavaScriptの関数を追加します。

sample.js

$(function(){
　（中略）
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});

ここで、DOM要素がjs-delete-btnになっている事に注意です。
appendメソッドで追加したhtml要素でJavaScriptを発火させる場合は、このようにクラスを指定する必要があります。

これで削除ボタンを押すと、表示されているポップアップウィンドウが消えるようになりました。
再び.btnを押すと、同じようにポップアップウィンドウが表示されます。

全体で下記のようなコードになります。

sample.js

$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window">
       <div class = "pop__window__delete-btn js-delete-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});