Question

我无法从dom中删除元素。我正在使用firfox。我的代码看起来像这样

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

<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]);
      }
   }
}

直到我没有删除元素代码工作正常但删除元素是必要的，因为例如用户在第一次尝试时不在文本框1中输入任何值，因此将添加h3元素但是现在他首先输入一些文本文本框但是第二个文本框为空，因此第一个文本框的h3元素应该消失。代码看起来很简单，我得到一个节点的引用，然后传入appendChild或removeChild。此外，我甚至无法在谷歌浏览器中添加元素到dom

Answer 1

试试这个：

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

Answer 2

如果您将创建错误的行更改为if ((textboxes[i].type == "text" || textboxes[i].type == "password") && textboxes[i].value == "")可行的

只是能够添加dom元素但不能删除它们

2 个答案: