Home/ Questions/Q 8769333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:18:54+00:00

I’m new to jQuery. Would you guys know why the .remove() doesn’t work for

  • 0

I’m new to jQuery.

Would you guys know why the .remove() doesn’t work for the rows that are added using the add button? It works otherwise for the already existing elements such as <li>One</li>.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.more').click(function(){
                html_frag='<li>XXX<input type="submit" value="Remove" class="testing" /></li>';
                $('ul li:last').after(html_frag);
                return false;
            });
        });

        $(document).ready(function(){
            $('.testing').click(function(){
                $(this).remove();
                return false;
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>
            One
            <input type="submit" value="Remove" class="testing" />
        </li>
    </ul>
    <input type="submit" value="Add" class="more" />
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because the newly added elements doesn’t exist on DOM when you bind that handler. Try using delegated events like below,

     $(document).ready(function(){
        $(document).on('click', '.testing', function(){
            $(this).remove();
            return false;
        });
 });
    • 0