[RESOLVED] - Help with jQuery .clone() - adding two elements before inserting to DOM?

[WolfShade]

Hello, all,

I have a form that allows a user to request a shipping cost estimate. Fixed contact information fields, fixed origin/destination fields, but the user can (eternally) add a set of fields for individual items that need to be shipped (description, weight, etc.)

I’ve got the .clone() working, and appending to the DOM after renaming the name and id of the elements. That was a breeze!

But, I would like to add (near the top of these fields) a “remove” button, to eliminate an item (user could have accidentally hit the “ADD” button too many times, or at last second an item needs to be removed, etc.)

How can I add my HTML for the button, but place it near the top of the fields, prior to appending to the DOM? Or should I append, first, then add the button (a button within a div.)?

The clone is being set to a variable $cargo.

V/r,

UPDATE: I got it kind of working. I am able to insert code after a div with a particular class. But it’s as text, not HTML (it’s not rendering the HTML Entity that I’m using for the - symbol.)

$cargo.find('.thin-divider').after('<div blah blah blah><a bla bla bla>remove [ &#8211; ]</a></div>');

Thoughts?

[PaulOB]

Works for me but I would probably use a span instead of an anchor.

e.g.

$cargo.find('.thin-divider').after('<div class="remove"><span>remove [ &#8211; ]</span></div>');

Do you have a working example where its not working?

[WolfShade]

I was just coming back to report that I had got it working.

$cargo.find('.thin-divider').after('<div style="text-align:right;"><button class="remCargoLink"></button></div>');
$cargo.appendTo('#cargoDetails');
$('.remCargoLink').attr('alt','Click to remove').attr('title','Click to remove').html('Remove Item [ &ndash; ]');

Thanks!