remove()で要素を削除した後に要素数をカウントする

Question

下記の様なコードで.delをクリックすると自分の直親要素ごとremove()され、その結果、.num要素の採番を1から振りなおしたいと考えております。
しかし、以下の様にコーディングした場合、上記の様な期待した動作が実行できません。console.log(children_elem);//hereを確認する限り、何も要素が取得できないため、remove()をしてしまった時点でvar children_elem = $(this).parents('.parent').children();が何も取得できなくなってしまっていると推察しました。

そこで、remove()をする前に var temp_elem = $(this)を先にしてtemp_elem.each(functionなども考えて実行してみたのですが、やはり実装できませんでした。

やりたいこととしては、要素の削除と採番（この例で言うと数値の再整列）なのですが、何か良い方法はございますでしょうか？

よろしくお願い申し上げます。

<div class="parent">
 <div class="child_1">
  <span class="num">1</span><span class="del">delete</span>
 </div>
  <div class="child_2">
  <span class="num">2</span><span class="del">delete</span>
 </div>
  <div class="child_3">
  <span class="num">3</span><span class="del">delete</span>
 </div>
</div>

$('.del').on('click',function(){
 $(this).parent().remove();
 var children_elem = $(this).parents('.parent').children();
 console.log(children_elem);//here
 children_elem.each(function(index,elem){
 elem.find('.num').text(index+1);
 })
})

JSFiddle

Answer 1

これだとどうでしょう？

        $(function(){
            $('.del').on('click',function(){
                // var children_elem = $(this).parents('.parent').children();
                // ↓
                var children_elem = $(this).parent().siblings();
                $(this).parent().remove();
                children_elem.each(function(index,elem){
                    // elem.find('.num').text(index+1);
                    // ↓
                    $(elem).find('.num').text(index+1);
                })
            })
        });

Comments

[pegy]

ご指摘ありがとうございます。JQueryラーパーにelemを括ることを失念しておりました。
実装できました、ありがとうございます！

Answer 2

正攻法かわかりませんが

<div id="parent_1" class="parent">

var get_id = $(this).parents('.parent').attr('id');
var elements = $("#"+get_id).children();

の様にしてユニークな要素を取得しておくことで実装はできることはできました。

Answer 3

 $(this).parent().remove();
 var children_elem = $(this).parents('.parent').children();

これを

 let parent = $(this).parents('.parent');
 $(this).parent().remove();
 var children_elem = parent.children();

にすれば良さそうです。

remove() のあとに $(this).parents('.parent') を実行しても class="parent" の要素は取れないのが問題なので、そこだけ remove() より前に実行すればよいです。

Comments

[pegy]

コメントありがとうございます。
それで初め行けると思ったのですが、動作致しません。
https://jsfiddle.net/fq1jnvux/3/
どこか誤解がございますでしょうか？

[int32_t]

コンソールにエラーが出ていますよね。
elem.find(...) を $(elem).find(...) に直しましょう。

[pegy]

失礼しました、単純なミスでした。
ご教示をいただきありがとうございました。