jquery - 通过 jquery 添加的 css id 不起作用

Question

我通过 jquery 动态添加 html 中的表格。我可以补充。但我无法删除添加的表。从 jquery 附加的 CSS“删除”id 不起作用。 “删除”ID 添加到脚本最后的部分标记中

Jquery

    $().ready(function(){
        $('#AddMoreId').on('click', function(){
                $('article:last').append('<article class="col100 left bggreen"><table><tr><th>ID</th><td><input type="number" id="id"></td></tr><tr><th>Menu in NPL</th><td><input type="text" id="menunep"></input></td></tr><tr><th>Menu in ENG</th><td><input type="text" id="menueng"></input></td></tr></table><section class="col100 left cursorpointer" id="remove">Remove</section></article><br/>');
        });

        $('#remove').on('click', function(){ 
            $(this).parents('article').remove();
        });

    });

HTML

<article class="col100 left bggreen">
    <table>
        <tr>
            <th>
                ID
            </th>
            <td>
                <input type="number" id="id">
            </td>
        </tr>
        <tr>
            <th>
                Menu in NPL
            </th>
            <td>
                <input type="text" id="menunep"></input>
            </td>
        </tr>
        <tr>
            <th>
                Menu in ENG
            </th>
            <td>
                <input type="text" id="menueng"></input>
            </td>
        </tr>
        <tr>
            <td class="cursorpointer" colspan="2" id="AddMoreId">Add field
            </td>
        </tr>
    </table>
</article>

Answer 1

对于动态添加的元素，请使用以下内容:

$(document).on('click', '#remove', function(){ 
    $(this).parents('article').remove();
});