Блог

Главная - Вопросы по программированию - remove() не работает при изменении события

remove() не работает при изменении события

#javascript #jquery

#javascript #jquery

Вопрос:

Я некоторое время искал это в Stack overflow, и, хотя некоторые задают этот вопрос, все ответы касаются необходимости делегирования события.

Я правильно делегировал even или, по крайней мере, я думаю, что у меня есть, но я все еще не могу удалить динамически созданные div.

Очевидно, что ему не нужно ничего удалять при первом изменении, но если пользователь изменяет его несколько раз, ему необходимо удалить уже созданный контент, чтобы он мог повторно добавить его с другими данными.

В настоящее время он не удаляется, а просто добавляет новый выпадающий список!

Может ли кто-нибудь указать мне правильное направление

HTML:

 <div class="model-background">

    <div class="model-wrap">

        <div class="ubl-section-1">

            <p>Please select customer you would like the PO to be for!</p>
            <p>
            <select id="companyreference2">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
            </p>

        </div>

    </div>

</div>

jQuery:

 jQuery(document).ready(function(e) {

    $('.ubl-section-1').on('change', '#companyreference2', function(){

        var costCode = $(this).val(); var buildCompanyRR = '';

        var companyInforData2 = {
            'pocompanyinfo': 2,
            'costcode': costCode,
            'companyid': companyID,
            'version': 'pocompanyinfo'
        };

        $.ajax({
            type: 'POST',
            url: '/Applications/Controllers/PurchaseOrders/submitPurchaseOrders.php',
            data: companyInforData2,
            dataType: 'html',
            encode: true
        }).done(function(data2) {

            //I need to get the references which are within that company
            buildCompanyRR  = '<p id="dynamiclist2" class="margin-top-20">Please select the reference<br />';
            buildCompanyRR  = '<select id="companyreference3" class="form-control">';
            buildCompanyRR  = '<option value="0">Please choose a reference</option>';   
            buildCompanyRR  = data2;
            buildCompanyRR  = '</select></p>';


            if($('#companyreference3').length !== 0){ 

                $('#dynamiclist2').remove();
                $('#dynamiclist3').remove();

            }

            $('.ubl-section-1').append(buildCompanyRR); 

        });

    });

});

Заранее спасибо за любую помощь 🙂

Комментарии:

1. #companyreference3 живет только в строке в то время, когда вы пытаетесь получить к ней доступ.

2. @Teemu да в первом экземпляре, что хорошо, потому что удаление не требуется, но как только оно было изменено, оно добавляется, и в этот момент оно не удаляется

3. @Teemu — оно добавляется к странице здесь: $('.ubl-section-1').append(buildCompanyRR);

4. Затем это возвращается к использованию одного и того же идентификатора несколько раз. Вы создаете p и select элементы со статическим id , # селектор находит только первый в дереве DOM.

5. @Teemu ему не нужно ничего удалять при первом изменении, но если пользователь изменяет его несколько раз, ему необходимо удалить уже созданный контент, чтобы он мог повторно добавить его с другими данными. В настоящее время он не удаляется, а просто добавляет новый выпадающий список!