ポップアップウィンドウ（削除ボタン）
はじめに
前回表示に成功したポップアップウィンドウは、リロードしない限りその場に残ったままです。
これでは具合が悪いので、削除ボタンを実装したいと思います。
別ブログにて、書き直したものを公開中です。
https://airesaies.com/2020/09/06/program008/
実行
前回までのコードは次の通りです。
.btn
ボタン
.pop
$(function(){
$(".btn").on("click" function(){
$(".pop__window").remove();
let html = `
<div class = "pop__window"></div>
`
$(".pop").append(html);
})
});
おさらいすると、let htmlで宣言しているhtmlデータを、.popの下に追加することになります。
まずは、このhtmlデータに、削除ボタンのコードを追加することにします。
$(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も次のように編集します。
.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の関数を追加します。
$(function(){
（中略）
$(function).on("click","js-delete-btn",function(){
$(".pop__window").remove;
})
});
ここで、DOM要素がjs-delete-btnになっている事に注意です。
appendメソッドで追加したhtml要素でJavaScriptを発火させる場合は、このようにクラスを指定する必要があります。
これで削除ボタンを押すと、表示されているポップアップウィンドウが消えるようになりました。
再び.btnを押すと、同じようにポップアップウィンドウが表示されます。
全体で下記のようなコードになります。
$(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;
})
});
Author And Source
この問題について(ポップアップウィンドウ（削除ボタン）), 我々は、より多くの情報をここで見つけました https://qiita.com/airesaies/items/5404d127e5b6b987f51b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .