调查问卷问题选项动态删除的实现

示例图片如下：

以下是JavaScript，

//保存上次获取焦点所在的位置，初始值设为null;
var prePosition=null;


//这就是radio加文本框加删除按钮图片所编译的代码
function single(){
$(".mainbody").append("
<div>
<input type='radio' value='' name="+singleNo+">
<input type='text' id='questionsDescriptions' value='单选题' onclick='showDeleteImg(this)'>
<img alt='delete'  id='img_option_delete' src='/Questionnaires-portlet/img/Delete.PNG' onclick='deleteOption(this)'>
<br>
</div>
")


//这就是实现点击一个文本框后面显示删除按钮，点击另一个文本框，上一个删除按钮消失，新点的文本框
后的删除按钮出现
function showDeleteImg(it){
if(prePosition!=null){
   $(prePosition).siblings("img").css("display","none");
}
$(it).siblings("img").css("display","inline");
prePosition=it;
}


//这就是点击删除按钮，此按钮所对应的选项删除。
function deleteOption(it){
$(it).parent().remove();
}




以下是对应的css
#img_option_delete{
display:none;
}


以下是添加所在的JSP代码，
<div class="mainbody" align="left">
    
</div>


在做毕设时，突然碰到这样一个问题：有一个问题，他下面有多个选项，每个选项由一个radio按钮，一个text
文本框，一个删除按钮组成。我想在点击文本框时，删除图片出现（没错，开始是消失的），你点击另一文本框时
，原先的删除图片消失，你所点击的文本框后出现删除按钮（当然你也可以点击其他问题中的选项，效果相同）。
这很简单，但是，同时，我在点击选项所对应的删除按钮时，整个选项删除。然后，纠结的时候来了，为了实现
删除图片的出现、消失功能，我现在text文本框中设置了onblur，不行，然后又在<div>中设置了onblur，还是不行，
因为我用的是火狐，所以<div>要实现onblur、onmouseout等，你要设置tabindex，具体的可以百度。然后还是不行。
因为text获取焦点，不代表他所在的<div>也获取焦点，而<div>没获取焦点，也就不存在onblur的问题，就像你连女朋友都没有，
就不存在结婚的问题，虽然你铁磁的哥们有女朋友，但是，和你有什么关系？
然后各种纠结，纠结了将近3天，查了各种资料，最后，发现用上面的代码可以很容易的实现，保存原来获取了焦点的text，
当你点击新的text时，新的删除图片出现，旧的删除图片消失，就是这么简单。
好吧，我承认是我同学提醒的我，我在他的思路上进行了改进，旁观者清啊。
js代码由jQuery编写，不会的百度去。

另外，编写jQuery别忘了下一个jQuery包。

附带一个我使用的日历控件