jQuery - Can't remove an appended div
<p>Hey All, thanks for the help in advance. I'm trying to create and remove input fields dynamically, they create just fine, but when i try to remove them it doesn't seem to find the div thats created, and removes the div above it, and hence all the inputs, instead of the just the one.</p>

<p>Heres my jscript:</p>

<pre><code>$("#addp").live('click' ,(function() {
    var partid = $('#partlist').val();
    var partname = $("#partlist option:selected").text();
    $('&lt;div&gt;').appendTo('#parts');
    $('&lt;label for="parts" class="left"&gt;' + partname + ': &lt;/label&gt;').appendTo('#parts'); 
    $('&lt;input type="text" name="part[' + partid + ']"&gt;').appendTo('#parts');
    $('&lt;input type="button" class="removepart" value="X"&gt;').appendTo('#parts');
    $('&lt;/div"&gt;').appendTo('#parts');
    numparts++;
})); 

$(".removepart").live('click', (function () {
    $(this).closest('div').remove();
}));
</code></pre>

<p>and HTML</p>

<pre><code>&lt;p class="edit"&gt;Parts Used&lt;/p&gt;
&lt;label for="parts" class="blank"&gt;Search for a Part&lt;/label&gt;
&lt;input type="text" name="partsearch" id="searchp_box" /&gt; 
&lt;input type="button" id="searchp_button" name="search" value="Search"&gt;
&lt;br/&gt;
&lt;label for="parts" class="blank"&gt;Parts Used&lt;/label&gt;
&lt;select name="parts" id="partlist"&gt;
&lt;/select&gt;
&lt;input type="button" name="search" id="addp" value="Add Part"&gt;
&lt;br&gt;
&lt;div id="parts"&gt;
&lt;/div&gt;
</code></pre>

<p>It <em>should</em> removes the closest div, which is created when you press the add button, but instead it removes the whole div id="parts" .</p>

<p>I searched around and was told to use .live, but it didn't seem to work :(</p>

<p>Thanks for reading :)</p>
