javascript - Jquery 删除不适用于克隆

Question

我有一组要删除的行，但是当我使用 jquery 删除时它不起作用。它没有删除克隆，但确实删除了原始版本。我想要的是当单击删除按钮时，要删除 parent - parent 的行。

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

由于您正在处理动态元素，因此需要使用 event delegation 。 on() 的事件委托(delegate)语法是

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

所以

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

也可以使用.closest()到祖先 tr 元素