[jQuery]別のclick,functionで作成した変数を使って、要素を削除する方法

前提・実現したいこと

１つのモーダルで、３つの情報を切り替えをしたい為、下記を行っております。

・各ボタン(.btn)をクリックした際、モーダルを展開させながら、モーダル部にカスタムデータ属性(data-id)を付与させる。

・モーダル内の閉じるボタンをクリックした際、モーダルに付与されたカスタムデータ属性(data-id)を削除したい（ボタンを押す度にクラスがたくさんでてくる為）。

・ボタン1をクリックした場合
モーダルが展開しつつ .modal--block に対し、カスタムデータ属性 data-id="1" とクラスdisplayを付与し、モーダル内に<p　class="test">テスト1テスト1</p>を表示させる

.modal--block 内の閉じるボタンをクリックした際、付与されているdata-idを削除

発生している問題・エラーメッセージ

変数がナンバリングしている為、removeClassで指定ができない為、クラスを削除できない。
その為、別のfunctionで指定した変数を持ってこれないか。
他の方法でも削除できるのでしたら、ご教授頂きたいです。

コード

html
1<div class="btn-list">
2    <button class="open-btn" data-id="1">ボタン1</button>
3    <button class="open-btn" data-id="2">ボタン2</button>
4    <button class="open-btn" data-id="3">ボタン3</button>
5</div>
6
7<div class="modal--block">
8    <p>テキスト</p>
9    <button class="close">閉じるボタン</button>
10</div>

js
1$('.open-btn').on('click',function(){
2
3    //クリックしたボタンのデータの取得
4    var sample = $(this).data('id');
5
6    //クリックしたデータ属性を modal--blockに付与
7    $(this).parents('.btn-list').next('.modal--block').data('id', sample);
8
9    //modal--block のデータ取得
10    var sample2 = $(this).parents('.btn-list').next('.modal--block').data('id');
11
12
13    var i = sample2;
14    var display = ('display'+i);
15
16
17    //受け取ったデータ番号をクラス display に追加
18    $(this).parents('.btn-list').next('.modal--block').addClass(display);
19    i++;
20
21     //出しわけたいテキスト
22　　　$(this).parents('.btn-list').next('.modal--block.display1').html('<p　class="test">テスト1テスト1</p>');
23
24　　　$(this).parents('.btn-list').next('.modal--block.display2').html('<p　class="test">テスト2テスト2</p>');
25
26　　　$(this).parents('.btn-list').next('.modal--block.display3').html('<p　class="test">テスト3テスト3</p>');
27
28
29});
30
31//モーダルを開く
32$('.btn').on('click',function(){
33    $(this).parents('.btn-list').next('.modal--block').fadeIn();
34});
35
36
37//モーダルを閉じる
38    $('.close').on('click',function(){
39        $('.modal--block').fadeOut();
40    });

yambejp

2021/03/24 00:55 編集

具体的になにをどうしたらどういう結果になるのを期待してるのか説明してください sampleというクラスのついたHTML要素が見当たりませんまたopenというHTMLタグも見当たりません

after.noon.tea

2021/03/24 02:24

ご指摘ありがとうございます。クラスの間違えを修正し、説明を具代的に書き直しました。

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

回答1件

ベストアンサー

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4<script>
5$(function(){
6  $('.modal--block').hide();
7  $('.btn').on('click',function(){
8    $('.modal--block').dialog({modal:true,buttons: { 
9      "閉じる": function() {
10        $(this).dialog("close");
11        $(this).attr("data-id",null);
12      },
13    }}).attr('data-id',$(this).attr('data-id'));
14  });
15});
16</script>
17<div class="btn-list">
18    <button class="btn" data-id="1">ボタン1</button>
19    <button class="btn" data-id="2">ボタン2</button>
20    <button class="btn" data-id="3">ボタン3</button>
21</div>
22
23<div class="modal--block">
24<p>テキスト</p>
25</div>
26