簡體   English   中英

只能添加 dom 元素但不能刪除它們

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

我無法從 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 和 append 它到相應字段的 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 元素應該消失。 代碼看起來很簡單,我得到一個節點的引用,然后傳遞給appendChildremoveChild 此外,我什至無法在 google chrome 中向 dom 添加元素

試試這個:

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

如果將產生錯誤的行更改為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