简体   繁体   English

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

[英]just able to add dom elements but not remove them

i am not able to remove elements from the dom.我无法从 dom 中删除元素。 i am using firfox.我正在使用firfox。 my code looks like this我的代码看起来像这样

i have a form for which all text boxes should be filled before submission.我有一个表格,在提交之前应该填写所有文本框。 my form looks like this我的表格看起来像这样

<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>

what i do here is that when a form is submitted i check if any text box is empty and if there is any i create a dom element h3 and append it to the div of that corresponding field and if the text box is not empty i check if there is any text box attached to that corresponding field and if i find one i remove it.我在这里所做的是,当提交表单时,我检查是否有任何文本框为空,如果有,我创建一个 dom 元素 h3 和 append 它到相应字段的 div,如果文本框不为空,我检查如果有任何文本框附加到相应的字段,如果我找到一个我删除它。 here is my javascript code这是我的 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]);
      }
   }
}

Until i was not removing elements the code was working fine but removing element is neccessary because for example a user doesnt enter any value in text box 1 on first attempt so an h3 element would be added but now he enters some text in first text box but leaves second text box empty so the h3 element of first text box should dissappear.在我没有删除元素之前,代码工作正常,但删除元素是必要的,因为例如用户在第一次尝试时没有在文本框 1 中输入任何值,所以会添加一个 h3 元素,但现在他在第一个文本框中输入了一些文本,但是将第二个文本框留空,因此第一个文本框的 h3 元素应该消失。 the code looks really simple, i am getting the reference of a node and then passing in to appendChild or removeChild .代码看起来很简单,我得到一个节点的引用,然后传递给appendChildremoveChild Also i am not even able to add elements to the dom in google chrome此外,我什至无法在 google chrome 中向 dom 添加元素

Try this one:试试这个:

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

if you change the line that creates the error to if ((textboxes[i].type == "text" || textboxes[i].type == "password") && textboxes[i].value == "") possible will work如果将产生错误的行更改为if ((textboxes[i].type == "text" || textboxes[i].type == "password") && textboxes[i].value == "")可能会奏效

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM