jQuery - removing an element by its class that was previously cloned
<p>below is my code.
the last bit of code is the part that isn't working.</p>

<p>I am using jQuery to populate a table of data from an array of objects:</p>

<pre><code>// loop to populate table data
for (var i =0; i &lt;= numItems-1; i++) {
    var newItem = '&lt;tr id="item_' + (i+1) + '"&gt;&lt;td&gt;' + items[i].name +
'&lt;/td&gt;' + '&lt;td&gt;$' + items[i].price + '&lt;/td&gt;' + '&lt;td&gt;' + items[i].category + 
'&lt;/td&gt;' + '&lt;td&gt;' + items[i].type + '&lt;/td&gt;' + '&lt;td&gt;' + items[i].modelNumber +
'&lt;/td&gt;&lt;/tr&gt;';
    $('#itemData').append(newItem);
};
</code></pre>

<p>then, I tell jQuery to clone the element that has been clicked, adding a class (cartItem) to the element so that I can remove it later if the user clicks on it. i place it in another element whose ID is cartData
(i'm not sure if I'm doing this in an efficient way)</p>

<pre><code>for (var i=0; i&lt;= numItems-1; i++) {
    $('#itemData #item_' + (i+1)).click(function () {
        $(this).clone().addClass('cartItem').appendTo('#cartData');
    });
};
</code></pre>

<p>i'm using this code to remove the element.</p>

<pre><code>$('.cartItem').click(function () {
    $(this).remove();
});
</code></pre>
