2011-07-10 89 views
0

我无法从dom中删除元素。我正在使用firfox。我的代码看起来像这样只能添加dom元素但不能删除它们

我有一个表单,在提交之前应该填写所有文本框。我的形式看起来像这样

<form name="form" method="post" action="url" onsubmit="return checkEmpty(this)" > 
<div class="field"> 
<label>field1</label><input type="text" name="f1" /> 
</div> 
<div class="field"> 
<label>field2</label><input type="text" name="f2" /> 
</div> 
.. 
.... 
...... 
input type="submit" name="Submit" value="submit" /> 
</form> 

我在这里做的是,当一个表单提交我检查是否有文本框为空,如果有任何我创建了一个DOM元素H3和它添加到了DIV相应的字段,如果文本框不是空的,我检查是否有任何文本框附加到相应的字段,如果我找到一个我删除它。这里是我的javascript代码

function checkEmpty(form) { 
    var textboxes=form.elements; 
    for(var i=0;i<textboxes.length;i++) 
    { 
     if((textboxes[i].type=="text" || textboxes[i].type=="password") && textboxes[i].textLength==0)     //text box is empty,this code works in firefox but not in chrome      
     { 
     var msg=document.createElement('h3'); 
     msg.innerHTML="u cant leave this field blank"; 
     textboxes[i].parentNode.appendChild(msg); 
     return false; 
     } 
     else      //text box is not empty,this code neither works in firefox nor in chrome 
     { 
     var rem_msg=textboxes[i].parentNode.getElementsByTagName('h3'); 
     for(var j=0;j<rem_msg.length;j++) 
      textboxes[i].parentNode.removeChild(rem_msg[j]); 
     } 
    } 
} 

,直到我不删除代码工作正常元素,但除电元件是neccessary因为例如用户犯规在第一次尝试输入在文本框中输入1的任何值,因此一个H3元素会但现在他在第一个文本框中输入了一些文本,但是第二个文本框留空,所以第一个文本框的h3元素应该消失。代码看起来很简单,我得到一个节点的引用,然后传入appendChildremoveChild。此外,我甚至不能够将元素添加到谷歌浏览器的DOM

回答

1

如果更改创建错误if ((textboxes[i].type == "text" || textboxes[i].type == "password") && textboxes[i].value == "")可能行会工作

+0

如果我删除'else'块的代码工作正常我的意思是即使即使所有的文本框都是空的,我点击提交表格提交 – lovesh

+0

即时即时即可添加元素,但只在firefox.in铬:谢谢你的工作 – lovesh

+0

@lovesh欢迎 – Sotiris

1

试试这个:

rem_msg[j].parentNode.removeChild(rem_msg[j]); 
+0

这个工作,但你能告诉我wats我的代码错了吗? – lovesh

+0

它也不适用于铬。即使所有的文本框都是空的,我点击提交表单提交 – lovesh

+0

我可以标记2答案作为接受bcoz你解决了我的问题的一部分,其他答案解决了下一部分。我已upvoted你的答案 – lovesh

相关问题