Adding elements to a page dynamically and then removing them
<p>I set up a jQuery control that adds a table containing textboxes to a page dynamically.</p>

<p>The adding part works fine, but the remove function at the end fires no matter where I click in the table...I just want it to remove the table when I click on the remove button.</p>

<p>Is there a better way to set this up?</p>

<p>Thanks</p>

<pre><code>    var linkCounter = 1;

    $("#btnAddLink").click(function () {
        if (linkCounter &gt; 10) {
            alert("Only 10 learning objectives allowed per page.");
            return false;
        }

      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'link' + linkCounter);
        newTextBoxDiv.after().html(
            '&lt;table&gt;' +
                '&lt;tr&gt;&lt;td&gt;' +
                '&lt;label&gt;URL: &lt;/label&gt;' +
                '&lt;/td&gt;&lt;td&gt;' +
                '&lt;input type="text" name="tbLinkUrl" style="width: 300px;"' +
                '" id="tbLinkUrl' + counter + '" value="" &gt;' +
                '&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;' +
                '&lt;label&gt;Label: &lt;/label&gt;' +
                '&lt;/td&gt;&lt;td&gt;' +
                '&lt;input type="text" name="tbLinkLabel" style="width: 300px;"' +
                '" id="tbLinkLabel' + counter + '" value="" &gt;' +
                '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
           newTextBoxDiv.Append.Html(
              '&amp;nbsp;&amp;nbsp;&lt;input type="button" value="Remove" class="removeLink"&gt;').click(function () {
                  $(this).remove();
                  linkCounter--;
              });
        newTextBoxDiv.appendTo("#linksGroup");
        linkCounter++;
    });
</code></pre>
