css id added through jquery not working

Question

I am adding table in html through jquery dynamically. I am able to add. But I can't remove added table. CSS 'remove' id which is appended from jquery doesn't work. 'remove' Id is added in section tag at last of script

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>

Eliellel · Answer 1 · 2018-05-15T14:44:22.353

3

For dynamically added items, use the following:

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

edited May 15 '18 at 14:44

answered May 15 '18 at 13:46

Eliellel

1,426
1
9
14

score 1 · Answer 2 · answered May 15 '18 at 13:52

1

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

Also you should note that you will have multiple buttons with id "remove", which is considered invalid, you should change it to use class instead.

answered May 15 '18 at 13:52

Jeremy

463
1
4
10

thanks for you information, In my case changing parents to closest works perfectly. – Dipak May 15 '18 at 14:22

score 1 · Accepted Answer · answered May 15 '18 at 13:56

try following code.

you need change id to class
use closest instead of parent

$().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 remove1" >Remove</section></article><br/>');
        });

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

   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" />
            </td>
        </tr>
        <tr>
            <th>
                Menu in ENG
            </th>
            <td>
                <input type="text" id="menueng" />
            </td>
        </tr>
        <tr>
            <td class="cursorpointer" colspan="2" id="AddMoreId">Add field
            </td>
        </tr>
    </table>
</article>

@paltarpan, I upvote right answer always. But sometimes instant upvote doesn't work after checking green tick. — Dipak, May 15 '18 at 14:25

score 0 · Answer 4 · answered May 15 '18 at 13:46

0

That is because the id is being generated dynamically. For this to work well, you need to modify the code as follows:

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

answered May 15 '18 at 13:46

Abin Thaha

4,493
3
13
41

css id added through jquery not working

4 Answers4