<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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/22 02:32
2019/05/22 03:37