JavaScript / TypeScript / jQuery

【JS (jQuery)】要素の動的追加・削除・番号振り直し

いくら

Vue.jsやReact.jsならシンプルに実装できる要素増減も、素のJavaScriptやjQeryだとやや面倒...

ここではjQueryを使用した要素の増減・番号振り直し実装をメモしておく

早速コード

参考なのでデザインは加味せずシンプルに実装ソースのみ

<!-- ここに要素が追加・削除される -->
<div class="js-list"></div>
<button type="button" class="js-add-btn">追加</button>
<!-- /ここに要素が追加・削除される -->

<!-- JS実装 -->
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
        crossOrigin="anonymous"></script>
<script>
    // ★追加ボタン押下時
    $('.js-add-btn').click(function () {
        const number = $('.js-list .js-list__item').length + 1
        $('.js-list').append(
            `<div class="list__item js-list__item">
				         <div class="js-number">${number}</div>
				         <div>ほげほげ</div>
                 <button type="button" class="js-delete-btn">削除</button>
            </div>`)
    })

    // ★削除ボタン押下時
    $(document).on('click', '.js-delete-btn', function () {
        $(this).parent('.js-list__item').remove()
        // ★ラベルの番号を振り直し
        $('.js-number').each(function (i) {
            $(this).text(i + 1);
        })
    })
</script>
<!-- /JS実装 -->

削除ボタンは動的に追加されるものなので、

$('.js-delete-btn').click(...)のような書き方だとイベント設定されない

そのため、$(document).on('click', '.js-delete-btn', ... の書き方がマスト

\ 案件のご依頼・ご相談はこちらから /