jquery で要素の追加、削除を行いたい

jquery を使い要素の追加削除をおこないたいです

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9
10    <style>
11        div {
12            padding: 0.5em 0.5em;
13            margin:  2em 3rem;
14            font-weight: bold;
15            border: solid 3px #000000;
16        }
17        .kanagata p {
18            margin: 0; 
19            padding: 0;
20        }
21    </style>
22
23</head>
24
25<body>
26
27    <div class="main">
28        <div class="kanagata">
29            <p>たいやきマシーン</p>
30            <button class="ryousan">量産！</button>
31        </div>
32    </div>
33
34
35    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
36    <script>
37        $(function() {
38
39            $(".ryousan").click(function() {
40                const taiyaki =  $(document.createElement('div'));
41                $(taiyaki).addClass("taiyaki")
42                $(taiyaki).html('<p>おいしいたいやき！</p>');
43                $(this).parent().before($(taiyaki));
44            });
45
46            const haikiBtn =  $(document.createElement('div'));
47            $(haikiBtn).addClass("haiki").html("<button>廃棄…</button>");
48
49            $('.main').on('mouseover', '.taiyaki' , function() {
50                $(this).append($(haikiBtn));
51            });
52            
53            // -----------------------------------------------------
54            $('.main').on('mouseout', '.taiyaki.haiki' , function() {
55            // -----------------------------------------------------
56                $(haikiBtn).remove();
57            });
58
59            $('.main').on('click', ".haiki", function() {
60                $(this).parent().remove();
61            });
62
63        });
64    </script>
65</body>
66</html>

余計な要素に乗ってるときはイベントを起こさないようにしたいです
各たいやきにボタンを追加、削除はできたのですが、他の要素（main内、かつtaiyaki外）に乗ってる時もボタンが残ってしまいます。こういう時はどうすればよいのでしょうか？

回答2件

jQuery
1            //①mouseover ⇒ mouseenter
2            $('.main').on('mouseenter', '.taiyaki' , function() {
3                $(this).append($(haikiBtn));
4            });
5            
6            //②mouseout ⇒ mouseleave
7            //③.taiyaki.haiki ⇒ .taiyaki
8            $('.main').on('mouseleave', '.taiyaki' , function() {
9                //④haikiBtn ⇒ '.haiki'
10                $('.haiki').remove();
11            });

php-gresさんのおっしゃる通り
表示・非表示を制御するクラスを定義した上でaddClass/removeClassした方がいいかと思いますが
提示いただいたソースで対応するなら①～④の変更で動くと思います。

投稿2022/01/17 07:17

jinba

総合スコア310

回答へのコメント

hiro114

2022/01/17 07:53

確かにそちらのほうがいいかもしれませんね書き直してみます

ベストアンサー

カラの要素を新規に作りたいのであれば、

jQuery
1const taiyaki =  $(document.createElement('div'));

↓

jQuery
1const taiyaki =  $('<div></div>');

が基本になるので、

jQuery
1                const taiyaki =  $(document.createElement('div'));
2                $(taiyaki).addClass("taiyaki")
3                $(taiyaki).html('<p>おいしいたいやき！</p>');
4                $(this).parent().before($(taiyaki));

↓

jQuery
1                const taiyaki =  $('<div></div>', {
2                    "class": "taiyaki",
3                }).html('<p>おいしいたいやき！</p>');
4                $(this).parent().before(taiyaki);

で済むんじゃないかと思います。

実は、const taiyakiを定義すらせず、before()の中で無名関数のように書いてしまうこともできます。
↓

jQuery
1                $(this).parent().before($('<div></div>', {
2                    "class": "taiyaki",
3                }).html('<p>おいしいたいやき！</p>'));

（動作確認はできていませんが、まずはお試しください。）

参考：jQuery入門道場 - 【jQueryとは？】

余談ですが、動的要素が少ないのであれば、
表示・非表示を制御するクラスを定義した上で
addClass/removeClassした方がいいかと思います。

投稿2022/01/17 07:08