JQuery удалить не работает на клоне

Question

JQuery удалить не работает на клоне

0

У меня есть набор строк, которые нужно удалить, но когда я использовал удаление jquery, это не сработало. Он не удалял клон, но он удалил оригинал. То, что я хочу, - это когда нажата кнопка удаления, а строки, которые являются родительскими родителями, должны быть удалены.

HTML

<tr class="expnedu-edu-record">
                    <td>
                        <select name="expnedu-record-tingkat" class="expnedu-record-tingkat">
                            <option>SD</option>
                            <option>SMP</option>
                            <option>SMA</option>
                            <option>SMK</option>
                            <option>D3</option>
                            <option>S1</option>
                            <option>S2</option>
                            <option>S3</option>
                            <option>Lainnya</option>
                        </select>
                    </td>
                    <td>
                        <select name="expnedu-record-tahun-min" class="expnedu-record-tahun-min">
                            <?php
                            $i = date('Y');
                            for($i;$i>=1900;$i--): ?>
                            <option><?php echo $i; ?></option>
                            <?php endfor; ?>
                        </select> - <select name="expnedu-record-tahun-max" class="expnedu-record-tahun-max">
                            <?php
                            $i = date('Y');
                            for($i;$i>=1900;$i--): ?>
                                <option><?php echo $i; ?></option>
                            <?php endfor; ?>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="expnedu-record-instansi" class="expnedu-record-instansi" />
                    </td>
                    <td>
                        <input type="text" name="expnedu-record-nilai" class="expnedu-record-nilai" />
                    </td>
                    <td>
                        <input type="button" value="X" class="expnedu-record-delete"/>
                    </td>
                </tr>

Jquery

    var edu_record = $('.expnedu-edu-record').clone();
$('#expnedu-add-edu').click(function(){
                var new_record = edu_record.clone(false);
                new_record.appendTo('.edu-edit-table');
            });    
    $('.expnedu-record-delete').on('click',function(){
                    $(this).parent().parent().remove();
                });

Пожалуйста, предоставьте решение, спасибо

godheaper 28 нояб. 2013, в 09:22

Источник

Теги:

php

javascript

jquery

html

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-11-28T04-48-00.000Z

Поскольку вы имеете дело с динамическими элементами, вам нужно использовать делегирование событий. Синтаксис делегирования события on()

$(static-ancestor-element).on(event, dynamic-element-selector, handler)

так

$('.edu-edit-table').on('click', '.expnedu-record-delete', function () {
    $(this).closest('tr').remove();
});

Также используйте .closest() для элемента precestor tr

Удивительно ... Я пытался делегировать события раньше, но это не сработало, потому что я не установил динамический селектор элементов ... Теперь это работает. Спасибо