jQuery nextAll() fonksiyonu | Cevap #9362

Merhaba,
Bir alt kategori varsa, yeni bir select ekliyorum. Toplam 3 adet alt alta select olduğunu düşünün. İkinci select değiştirildiğinde, bir altındakinin seçilip kaldırılmasını ve yeniden oluşturulmasını istiyorum. Bu nedenle, genel olarak seçilen select altındaki tüm div kaldırılacak ve yeniden oluşturulacaktır. nextAll() işlevini kullanıyorum ama çalışmıyor. Laravel ile çalışıyorum ve oradaki html verilerini hazırlayıp dom’a ekliyorum. Daha iyi bir yöntem varsa lütfen bana bildirin. İşte size örnek kodlar;

Modal içerisindeki HTML;

<div id="selectCategoryGroups">
    <div class="mb-10 fv-row add-new-category">
        <label for="category" class="required form-label">Select Main Category</label>
        <select class="form-select select-category mb-2" id="category" name="category[]" data-controls="select2" data-hide-search="false" data-placeholder="Select a Category" required>
            <option></option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name[Config::get('app.locale')] }}</option>
            @endforeach
        </select>
    </div>

    <img id="categoryLoading" style="display: none;" src="{{ asset('seller-assets/assets/media/loading.gif') }}" width="70" alt="loading" />
</div>

JS kodları;

$('.select-category').select2({
        dropdownParent: $('#selectCategoryModal'),
    }).on('change', function () {
        $('#selectCategoryGroups').nextAll('div').remove();

        let id = $(this).val();
        newCategory(id);
    });

    function newCategory(id) {
        $('#selectCategoryGroups').nextAll('div').remove();
        $('#categoryLoading').css('display', 'block');

        $.ajax({
            url: '{{ route('seller.product.get.category') }}',
            method: 'GET',
            data: {
                id: id
            },
            success: function(data) {
                if(data !== null) {
                    $('#categoryLoading').css('display', 'none');
                    $(data.html).insertAfter($('.add-new-category').last());

                    $('.select-category'+id).select2({
                        dropdownParent: $('#selectCategoryModal'),
                    }).on('change', function () {
                        let id = $(this).val();
                        newCategory(id);
                    });
                }
            },
            error: function (err) {
                $('#categoryLoading').css('display', 'none');
                console.log('ERR => ', err);
            }
        });
    }

getCategory fonksiyonu;

public function getCategory(Request $request)
{
    $data = Category::select('id', 'parent_id', 'name')->get()->toArray();

    $tree = new Tree(
        $data,
        ['id' => 'id', 'parent' => 'parent_id', 'title' => 'name']
    );

    $node = $tree->getNodeById($request->input('id'));
    $descendants = $node->getChildren();

    $html = '';

    $html .= '<div class="mb-10 fv-row add-new-category">';
    $html .= '<label for="category" class="required form-label">Select Sub Category</label>';
    $html .= '<select class="form-select select-category'.$request->input('id').' mb-2" name="category[]" data-control="select2" data-hide-search="false" data-placeholder="Select a Category" required>';
        $html .= '<option value=""></option>';

    if($descendants) {
        foreach($descendants as $descendant) {
            $html .= '<option value="'.$descendant->id.'">'.$descendant->name[Config::get('app.locale')].'</option>';
        }
        $html .= '</select>';
        $html .= '</div>';

        return response()->json(['id' => $request->input('id'), 'html' => $html], 200);
    }else {
        return response()->json(['id' => 0, 'html' => null], 200);
    }
}

Düzenleme: Sorunu çözdüm :)