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

Question

我通过 jquery 动态地在 html 中添加表。我可以补充。但我无法删除添加的表格。从 jquery 附加的 CSS 'remove' id 不起作用。'remove' 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>

标签： jqueryhtmlcss

Answer 1

对于动态添加的项目，请使用以下内容：

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