Why doesn't jQuery remove work for dynamically added rows?
<p>I'm new to jQuery. </p>

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

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

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