jquery 删除一组文本框(源码如下，请高手调试一下)

这样写了，只能从最后点删除，lz的问题只能通过表格来解决：        function btndel()
        {
          $("#T_model").find("input.remove").click(function(){
$("#T_model input:gt("+($("#T_model input").size()-3-1-1)+")").remove();
          })
        }

ok，没用table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js "> </script>
</head> <body>
<input type="button" value="添加" onclick="addu();" />
<div id="T_model">
</div>
<div id="showbutton" style="display:none;">
                              <input id="SubTT" type="button" value="提交"  onclick="btnOK();"/>
                        </div>
<script language="javascript">
   function addu() {
var d=new Date()-0;//每次根据日期生成唯一的name
            for (var i = 0; i < 3; ++i)
            {$("#T_model").append(" <input name='text" + d + "' type='text' />");} //这里修改了name,你之前的id也去掉了
            $("#T_model").append(" <input type='button' name='text"+d+"' class='remove' value='Delete' onclick='btndel();'/>");
          $("#T_model").append(" <br>");
        }
        function btnOK() {
            var aa="";
          $("#T_model input").each(function(){

          aa+=$(this).val()+"|";})
          return aa;
        }
        function btndel()
        {
          $("#T_model").find("input.remove").click(function(){
$("#T_model input[name='"+this.name+"']").remove();
          })
        } </script>
</body>
</html>

主要是将每次生成的用一个name，这样删除就容易查找了

用表格来吧，这样会更好，没人会你那样来处理数据的，根本没办法管理<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js "> </script>
</head>
<body>
<input type="button" value="添加" onclick="addu();" />
<table id="T_model"> ds
<table>
<div id="showbutton" style="display:'';">
<input id="SubTT" type="button" value="提交" onclick="btnOK();"/>
</div>
<script language="javascript">
function addu() {
var tb=document.getElementById("T_model");//这里不能用jq的选择器，
var tr=tb.insertRow(tb.rows.length);//添加行
for(var i=0;i<3;i++) {
var td=tr.insertCell(i);//添加单元格
td.innerHTML="<input type='text'/>";//往单元格里插入html或者$(td).html("<input type='text'/>");
}
var lasttd=tr.insertCell(tr.cells.length);//插入删除那个单元格
lasttd.innerHTML="<input type='button' onclick='btndel(this)' value='Delete'/>";
}
function btnOK() {
var aa="";
$("#T_model input[type='text']").each(function(){ //只取type='text'的
aa+=$(this).val()+"|";
})
alert(aa)
return aa; //这里没必要返回
}
function btndel(obj) {
var tr=obj.parentNode.parentNode;//获取当前行
tr.parentNode.removeChild(tr);
} </script>
</body>
</html> ok，收工，回去

想起一个问题，又回来了//var tb=document.getElementById("T_model");//这里不能用jq的选择器，
var tb=$("#T_model").get(0);//$("#T_model")[0]//将jquery对象转化为dom对象才能使用下面的方法

路过，随便说几句吧。
用什么不是一样，随便写了个，还有，为什么都这么喜欢用for循环？WHILE循环应该是首选,其它的细节我就不多说啦。不怎么喜欢贴代码，看是新手的份上还是贴下吧，声明一点，我不是高手，注释就不写了，谁都看的懂的，呵呵。
<script type = 'text/javascript'>
$( document ).ready( function() {
var guid = 0;
$('#addInput').click( function () {
var inputc = $( '#input_content' );
guid = inputc.html() == '' ? 1 : guid+1;
var inputs = ['<div id = "element-input'+guid+'"><strong>第'+guid+'组INPUT</strong>'],
length = 3;
while ( length ) {
inputs.push( '<input type = "text" value = "this is input'+(--length)+'" />' );
}
inputs.push('<input type = "button" value = "删除第'+guid+'组INPUT" onclick = "$(\'#element-input'+guid+'\').remove()" /><br /></div>');
inputc.append( inputs.join('') );
});
});
</script>
<input type = 'button' id = 'addInput' value = 'addInput' />
<div id = 'input_content'></div>

谢谢 sohighthesky 给分

调试易

jquery 删除一组文本框(源码如下，请高手调试一下)

解决方案 »