[jQuery] Alle div's worden verwijderd ipv 1

[Stabiloy]

Beste,
ik heb onderstaande code. Echter wanneer er op de img gedrukt wordt, verwijderen alle div's. Er moet er maar 1 verwijderen, namelijk de geselecteerde. Ik zie de fout niet. Hopelijk kunnen jullie mij helpen.

<script type="text/javascript">
 
  $(document).ready(function(){
	var itemsArray = [];
	$("#country").change(function(){
		var keuzeId = $("#country").val();
		var keuzeName = $("#country option:selected").text();
			itemsArray.push(keuzeId);
			
			$("#country option[value='"+keuzeId+"']").remove();
			$("#items").append('<div id="'+keuzeId+'"><a href="" onclick="remove('+keuzeId+''+keuzeName+')"><img src="delete.png" width="18" border="0"></a>'+keuzeName+'<br/></div>');
	}) 
	
	function remove(id, name){
		$("#"+id).remove();
		$("#country").append('<option value="'+id+'">'+name+'</option>');	
	}
	
  });
</script>
<div id="items"></div>
<select id="country">
<option value="None">-- Select --</option>
<option value="1">China</option>
<option value="2">United State</option>
<option value="3">Malaysia</option>
</select>

 

[Robin S]

Ik zie een paar dingen die je kunt verbeteren:
- Regel 11, de href van je <a> is leeg. Als je wil dat de pagina niet herlaadt kun je daar beter javascript: void 0; van maken.
- Regel 11, de aanroep van remove (in onclick, <a>) mist wat interpunctie: een komma tussen de argumenten en aanhalingstekens om de string keuzeName. ('... onclick="remove('+keuzeId+', \"'+keuzeName+'\")" ...')
- Regel 11, de onclick van je <a> wil je laten verwijzen naar de functie remove. Die functie, echter, is lokaal gedefiniëerd (binnen een anonieme functie die als onReady-handler dient). Je kunt remove beter daarbuiten definiëren (op regel 2 bijvoorbeeld).

Kijk eens of dat beter gaat. Zo niet, post dan even je nieuwe code zodat we kunnen bekijken wat er dan nog mis gaat

 

[michaelbeersnl]

Dit zal wel werken

<script type="text/javascript">
jQuery(document).ready(function($)
{
	var items = $('#items');
	var ul = $('<ul />');
	
	items.append(ul);
	
	$('#country').on('change', function()
	{
		var id = $(this).val();
		var name = $('option:selected', this).text();
		
		$('option:selected', this).remove();
		ul.append('<li class="country-li" data-id="' + id + '" data-name="' + name + '"><img src="delete.png" width="18" border="0">'+name+'</li>');
	});
	
	$('.country-li').live('click', function()
	{
		var id = $(this).data('id');
		var name = $(this).data('name');
		
		$(this).remove();
		$("#country").append('<option value="'+id+'">'+name+'</option>');
	});
});
</script>