jQuery help?

[ffsja]

So I'm using jQuery to add new <SELECT> boxes to my form that get data from a mysql database. It all works great, EXCEPT I cannot get my 'remove' link that I am putting next to my <SELECT> boxes to actually remove the <SELECT> box it's next to. Here's my code:

<script type="text/javascript">
var count = 0;
$(function() {
$('p#add_field').click(function() {
count += 1;
$('#container').append('<select id="field_' + count + '" name="fields[]' + '"> <?php echo javascript_escape($course_block); ?> </select><a href="#" onclick="removeFormField(field_' + count + '); return false;">Remove</a>');
});
});

function removeFormField(id) {
$(id).remove();
}
</script>

[Spudhead]

There's a javascript frameworks forum on here that you can ask jquery questions in.

You should take the onclick out of your anchor tag, and handle the click event when you create it. There's probably a better way than this, but this works:

var count = 0;
$(document).ready(function(){

	$('p#add_field').click(function(){
	
		count++;
		
		$('#container')
		.append(
			$('<select>')
				.attr('id', 'field_' + count)
				.attr('name', 'fields[]')
				.append('<?php echo javascript_escape($course_block); ?>')
		)
		.append(
			$('<a>').addClass('select_remove').attr('href','#').text("Remove")
		)
		
		$('a.select_remove').unbind('click').click(function(){
			$(this).prev('select').remove();
			$(this).remove();
			return false;
		});
	});
});

[ffsja]

Thank you, that worked marvelously!