divに生成したボタンと文の削除を行うボタン

<h1>にあるClick Me!ボタンをクリックすることで、YEAHという文と右横にXボタンを<div>に追加し、Xボタンをクリックすることでその文とXボタンを削除するものを作りたいと考えています。

しかし、Click Me!ボタンを複数回クリックし、複数の文とXボタンを追加すると、Xボタンの動作がうまくいきません。
クリックしたXボタンとそれ以降の文とXボタンがすべて削除されてしまいます。

指定した文だけ削除する方法をご教授いただきたいです。
よろしくお願いします。

JQuery
1<!DOCTYPE html>
2<html>
3    <head>
4    </head>
5    <body>
6            <h1 class="btn-area">
7                <button class="click">Click Me!</button><br/>
8            </h1>
9            <h2>
10            </h2>
11        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12        <script>
13            $('.click').click(function(){
14                $('h2').append('<div>YEAH <button class="bb">X</button></div>');
15                $('.bb').click(function(){
16                    var index = $('.bb').index(this);
17                    $('div').eq(index).remove();
18                    index = 0;
19                        });
20                });
21        </script>
22    </body>
23</html>
24

行動規範の内容に同意します

回答3件

こういう処理です

javascript
1<script>
2$(function(){
3  $('.click').on('click',function(){
4    $('h2').append($('<div>YEAH <button class="bb">X</button></div>'));
5  });
6  $('h2').on('click','.bb',function(){
7    $(this).closest('div').remove();
8  });
9});
10</script>
11<h1 class="btn-area"><button class="click">Click Me!</button><br/></h1>
12<h2></h2>

投稿2019/05/22 02:30

yambejp

総合スコア114769

miyabi_pudding

2019/05/22 02:32

これ一番スマートな気がしますね。

yasutomi

2019/05/22 03:37

$(this).parents('div').remove()や $(this).parent().remove()でも可能ですね。 append内のHTMLが変わらない前提であれば直近の親要素を取得するclosest('div')が最適解ですね。

行動規範の内容に同意します

推測なのですが、.clickボタンのclickイベントの際に.bbに対するイベントが付与されていっているため、作った要素と.bbのクリックが紐づいてしまったのではないかと思います。
同じ文言なので見えづらいので、例えば連番をつけてみたりすると挙動が確認できると思います。

js
1
2var id = 0;
3$('.click').click(function(){
4    $('h2').append('<div>YEAH'+id+'<button class="bb">X</button></div>');
5    id++;
6    $('.bb').click(function(){
7        var index = $('.bb').index(this);
8        $('div').eq(index).remove();
9        index = 0;
10    });
11});

2つのクリックイベントを独立させると良いと思います。
ただ「動的要素のクリック」なので呼び出し方が変わります。

js
1var id = 0;
2$('.click').on('click',function() {
3    $('h2').append('<div>YEAH'+id+'<button class="bb">X</button></div>');
4    id++;
5});
6
7$(document).on('click','.bb',function() {
8    var index = $('.bb').index(this);
9    $('div').eq(index).remove();
10});
11

※ちゃんと押した番号が消えるかという確認のために連番振っています。

投稿2019/05/22 02:24

m.ts10806

総合スコア80850

まず、JavaScriptの処理だろうと、h2にdivを入れるのはよろしくありません。
spanがいいかなーと思います。（見た目は、CSSで調整すればいい）
さて、回答に関してですが、
追加したDOMに対して、削除対象を、クラスのついた同じインデックスのDOMではなく、
自分の親を削除する、クリックイベントを追加で解決できるでしょう。
下記でいかがでしょうか。

html
1<!DOCTYPE html>
2<html>
3    <head>
4    </head>
5    <body>
6            <h1 class="btn-area">
7                <button class="click">Click Me!</button><br/>
8            </h1>
9            <h2>
10            </h2>
11        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12<script>
13$('.click').click(function(){
14  $('h2').append('<span>YEAH <button class="bb">X</button></span>');
15  $('.bb').click(function(){
16    $(this).parent().remove();
17  });
18});
19</script>
20    </body>
21</html>