Jquery remove对克隆无效

Question

我有一组行要删除，但当我使用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();
                });

请提供解决方案，谢谢

Answer 1

由于您正在处理动态元素，因此需要使用事件委派 。 on（）的事件委托语法是

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

所以

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

也可以将.closest（）用于祖先tr元素