クリックした列が消えるように特定の列を取得したい

Question

前提・実現したいこと

<thead>の<th>内に閉じるボタンを設置し、そのボタンをクリックすることで クリックされた列が削除されるようになってほしい。 例えば、1列目の閉じるボタンを押して削除した後に、 4列目の閉じるボタンを押して削除できるように、 同じ動作を繰り返し別の列もできるようになってほしい。

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

該当の列を複数取得すことはできたのですが、
該当の列のindexを取得するやり方がわかりません。

該当のソースコード

<div><!--チェックボックス-->
　<ul>
　　<li>
　　　<label for="item-1"><input type="checkbox" value="1" id="item-1">アイテム1</label>
　　</li>
　　<li>
　　　<label for="item-2"><input type="checkbox" value="2" id="item-2">アイテム2</label>
　　</li>
　</ul>
</div>

<div><!--ボタン-->
  <button class="execution">実行</button>
  <button class="reset">リセット</button>
</div>

<table>
 <thead>
   <tr>
     <td></td>
     <th data-selection="1">
　　　　<div><p class="clm_close">×</p>アイテム1-1</div>
     </th>
     <th data-selection="1">
　　　　<div><p class="clm_close">×</p>アイテム1-2</div>
     </th>
     <th data-selection="2">
　　　　<div><p class="clm_close">×</p>アイテム2-1</div>
     </th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th>テキストA</th>
     <td>テキストA-1</td>
     <td>テキストA-2</td>
     <td>テキストA-3</td>
   </tr>
   <tr>
     <th>テキストB</th>
     <td>テキストB-1</td>
     <td>テキストB-2</td>
     <td>テキストB-3</td>
   </tr>
 </tbody>
</table>

.hide{
    display: none;
}
table thead th div{
    position: relative;
}
table thead th div .clm_close{
    position: absolute;
    top: 1px;left: 1px;
}

$(function() {
    // 実行ボタンを押すとチェックされていない該当列は消える
    $('.execution').click(function() {
        let values = [],
            col_index = [];

        $('[type="checkbox"]:not(:checked)').each(function(){
            values.push(parseInt($(this).val()));
        });

        if (values) {
            $('thead tr').children().each(function(index, element){
                if ($.inArray($(element).data('selection'), values) != -1) {
                    col_index.push(index);
                }
            });

            $.each(col_index, function(index, value){
                $('tr').each(function(){
                    $(this).children().eq(value).addClass('hide');
                });
            });
        }
    });
});


$(function() {
    // 実行ボタンを押すとチェックされた該当列は残る
    $('.execution').click(function() {
        let values_1 = []; 
        let col_index_1 = [];

        $('[type="checkbox"]:checked').each(function(){
            values_1 .push(parseInt($(this).val()));
        });

        if (values_1 ) {
            $('thead tr').children().each(function(index, element){
                if ($.inArray($(element).data('selection'), values_1 ) != -1) {
                    col_index_1.push(index);
                }
            });

            $.each(col_index_1, function(index, value){
                $('tr').each(function(){
                    $(this).children().eq(value).removeClass('hide');     
                });
            });
        }
    });
});

//両方チェックすると全て表示
$(function() {
  $('.execution').click(function() {
  if ($('[value="1"]').prop('checked') && $('[value="2"]').prop('checked')) {
     $('.hide').removeClass('hide');
  };
 })
});


//リセットボタンを押すと全て表示
$('.reset').click(function() {
    $('.hide').removeClass('hide');
    $('[type="checkbox"]').prop('checked', false);
});

試したこと

$(function() {
    $('.clm_close').click(function() {
        //.clm_closeをクリックしたセルの<th>に.hideクラスを追加して消す
        $(this).parents('th').addClass('hide');

        let values_2 = [];
        let col_index_2 = [];

        //①.hideクラスがついたセルの値を取得(したつもり)
        $('.hide').each(function(){
            values_2.push($(this));
        });

        //②.hideクラスがついた該当する列のindexを取得したい
        if (values_2) {
            $('thead tr').children().each(function(index, element){
                if ($.inArray($(element).data('selection'), values_2) != -1) {
                    col_index_2.push(index);
                }
            });

            // 全ての行について、該当列にhideクラスを追加
            $.each(col_index_2, function(index, value){
                $('tr').each(function(){
                    $(this).children().eq(value).addClass('hide');
                });
            });
        }
    });
});

②のcol_index_2で該当する列のindexを取得したかったのですが、
console.logで見ても何も取得されていませんでした。
①の時点で間違えているのか、最初から間違えているのか、わからなくなってしまいました。

ご教授のほどよろしくお願いいたします。

Answer 1

②のcol_index_2で該当する列のindexを取得したかったのですが

$.inArray($(element).data('selection'), values_2)してますよね。

例えば、右端の「アイテム2-1」の閉じるボタンをクリックしたら、
values_2配列には、何が入っててほしいですか?

'2'ですよね?

だとすると、①のところでは、values_2.push($(this))ではなく、
values_2.push($(this).data('selection'))とすべきですね。

---

余談ですが、thのdata-selection属性には一意な値をセットする作戦だと思ったのですが、違います? 現状は、左から1, 1, 2となってるので、マズイんじゃないかなぁ。

あと、②のところにif (values_2) {がありますが、values_2は配列なので、if (values_2.length > 0) {の方が意図に沿ってるのではないかと思いました。

Comments

[退会済みユーザー]

回答ありがとうございます。
まずdata-selection属性を2種類にしているのは、
value="1"のチェックボックスにチェックを入れて実行ボタンを押すとdata-selection="1"の列が、
value="2"のチェックボックスにチェックを入れて実行ボタンを押すとdata-selection="2"の列が残るようになってほしいためです。

確かにjqueryを直してみたところ、data-selection属性を一意にしていないため閉じるボタンを押した場合、共通のdata-selection属性ごと消えてしまいました。

($.inArray($(element).data('selection')…)の考え方がまず間違えていました。
ご指摘ありがとうございました。

Answer 2

その場合は.index()で取得できます。
コードも以下のようにもっと単純にできます。

$('.clm_close').click(function() {
	let th = $(this).closest('th'),
		index = $('thead tr th').index(th);
	
	th.addClass('hide');
	
	$('tbody tr').each(function(){
		$(this).children('td').eq(index).addClass('hide');
	});
});

ただしhtml構造が、提示されているようにthead, tbodyとも1列目と2列目以降で違っている前提で上記は期待通りに動作します。仮にthead内が全てth、且つtbody内は1列目だけthで2列目以降がtdという場合は別の対応が必要です。

あと、本題とは関係ありませんが、$(function() {...}が繰り返し書かれていますが、一つの$(function() {...}の中に全部まとめることが可能です。その方がコードがすっきりしますよ。

Comments

[退会済みユーザー]

回答ありがとうございます。
想定していた動きを出せるようにできました。
$(function() {...}もまとめてみました。
精進します。ありがとうございました。