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

Question

前提・実現したいこと

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

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

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

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

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

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

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

コード

<div class="btn-list">
    <button class="open-btn" data-id="1">ボタン1</button>
    <button class="open-btn" data-id="2">ボタン2</button>
    <button class="open-btn" data-id="3">ボタン3</button>
</div>

<div class="modal--block">
    <p>テキスト</p>
    <button class="close">閉じるボタン</button>
</div>

$('.open-btn').on('click',function(){

    //クリックしたボタンのデータの取得
    var sample = $(this).data('id');

    //クリックしたデータ属性を modal--blockに付与
    $(this).parents('.btn-list').next('.modal--block').data('id', sample);

    //modal--block のデータ取得
    var sample2 = $(this).parents('.btn-list').next('.modal--block').data('id');


    var i = sample2;
    var display = ('display'+i);


    //受け取ったデータ番号をクラス display に追加
    $(this).parents('.btn-list').next('.modal--block').addClass(display);
    i++;

     //出しわけたいテキスト
　　　$(this).parents('.btn-list').next('.modal--block.display1').html('<p　class="test">テスト1テスト1</p>');

　　　$(this).parents('.btn-list').next('.modal--block.display2').html('<p　class="test">テスト2テスト2</p>');

　　　$(this).parents('.btn-list').next('.modal--block.display3').html('<p　class="test">テスト3テスト3</p>');


});

//モーダルを開く
$('.btn').on('click',function(){
    $(this).parents('.btn-list').next('.modal--block').fadeIn();
});


//モーダルを閉じる
    $('.close').on('click',function(){
        $('.modal--block').fadeOut();
    });

Comments

[yambejp]

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

[after.noon.tea]

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

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
  $('.modal--block').hide();
  $('.btn').on('click',function(){
    $('.modal--block').dialog({modal:true,buttons: { 
      "閉じる": function() {
        $(this).dialog("close");
        $(this).attr("data-id",null);
      },
    }}).attr('data-id',$(this).attr('data-id'));
  });
});
</script>
<div class="btn-list">
    <button class="btn" data-id="1">ボタン1</button>
    <button class="btn" data-id="2">ボタン2</button>
    <button class="btn" data-id="3">ボタン3</button>
</div>

<div class="modal--block">
<p>テキスト</p>
</div>

Comments

[yambejp]

jQueryを利用する前庭であればjQueryUIのdialogを利用するのが楽です
肝心のdata-idを削除し忘れてたので修正しておきました

[after.noon.tea]

ありがとうございます。
問題なく動きました！