单选状态的问题

Question

<dl>
<dt>New South Wales</dt>
<dd><a href="javascript:void(0)" onclick="setcity('armidale',this)">Armidale</a><span></span></dd>
<dd><a href="javascript:void(0)" onclick="setcity('bathurst-orange',this)">Bathurst-Orange</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('brokenhill',this)">Broken Hill</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('centralcoastnsw',this)">Central Coast NSW</a></dd> 
<dd><a href="javascript:void(0)" onclick="setcity('coffsharbour',this)">Coffs Harbour</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('cooma',this)">Cooma</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('dubbo',this)">Dubbo</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('goulburn',this)">Goulburn</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('lismore',this)">Lismore</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('newcastle',this)">Newcastle</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('portmacquarie',this)">Port Macquarie</a></dd>  
<dd><a href="javascript:void(0)" onclick="setcity('southcoastnsw',this)">South Coast NSW</a></dd>
<dd><em><a href="javascript:void(0)" onclick="setcity('sydney',this)">Sydney</a></em></dd>
<dd><a href="javascript:void(0)" onclick="setcity('tamworth',this)">Tamworth</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('tweedheads',this)">Tweed Heads</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('waggawagga',this)">Wagga Wagga</a></dd>
<dd><a href="javascript:void(0)" onclick="setcity('wollongong',this)">Wollongong</a></dd>
</dl>function setcity(city,obj){
obj.className="selected"; 
var div=document.createElement('span');
obj.appendChild(div);
}
想实现单选，点击哪个，哪个就显示选中的状态，后面有一个勾（通过添加一个<span>)，可是现在的问题是，点完一个，点下一个的时候，前面点的不会清除状态，导致越点的多，选中状态越多，帮帮忙吧~~

Answer 1

function setcity(city,obj){
var o = document.getElementById('wrapper').getElementsByTagName('span'); //<dt id="wrapper">New South Wales</dt>
for (var i = 0; i < o.length; i ++) o[i].parentNode.removeChind(o[i]);
    obj.className="selected"; 
    var div=document.createElement('span');
    obj.appendChild(div);
}

Answer 2

打错了：
.removeChind -> .removeChild

Answer 3

楼上正解 但是建议用jquery 2句话搞定

Answer 4

jQuery是方便，但为了实现非常简单的功能而去加载一个将近100KB的文件，就属于滥用了。。

Answer 5

我有加载jquery1.3.2，30多k，请问怎么两句话啊？

Answer 6

1楼的没有效果啊~~我点击后选中的效果是加在 a上的，也就是改变a的className，我修改成var o = document.getElementById('wrapper').getElementsByTagName('a') 也没有效果啊

Answer 7

不好意思，修正一下，有效果。 后面的勾没问题。但是前面链接当前选中和点击过的效果一样：点的越多，a的效果还是越多，没有清除点击过的a的效果。obj.className=""; 这句应该加在哪里？

Answer 8

用jquery点击a的时候后面span写一个钩钩    
$（"dd"）.children("a").cilck(function(){
    $("dd").children("span").remove();
    $(this).next("span").html("√");
    
});

Answer 9

$(this).next("span").html("√");   这里改一下  改成 $(this).append("<span>√</span>")