刪除我剛剛在Javascript中添加的子節點

嗨，我很新的HTML和JavaScript。我正在嘗試驗證表單。當用戶沒有以正確的格式輸入日期時，我希望在輸入下方顯示一個段落，要求他們輸入有效的日期。我設法通過追加孩子來做到這一點。但是，輸入正確的日期後，我無法移除孩子。我相信這是一件非常簡單的事情，但沒有看到網上的運氣。此外，我想知道是否有一種方法只添加該段如果它不存在。以下是代碼。刪除我剛剛在Javascript中添加的子節點

function checkDate(date) 
{  
    var result; 
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/; 
    result = expression.test(date.value); 
    var para=document.createElement("p"); 
    var node=document.createTextNode("Enter a valid Date"); 
    para.appendChild(node); 
    var element=document.getElementById(date.id).parentNode; 

    if(!result===true) 
    { 
     element.appendChild(para); 
    } 

    else 
    { 

     element.removeChild(para); 
    }  
}

來源

2013-08-26 user2716814

問題是您正嘗試刪除剛創建的元素。所以如果你三次調用你的函數，你將會有三個新的元素。

解決此問題的方法之一是對您的元素p進行全局引用。就像這樣：

para=document.createElement("p"); 

function checkDate(date) 
{  
    var result; 
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/; 
    result = expression.test(date.value); 

    var node=document.createTextNode("Enter a valid Date"); 
    para.appendChild(node); 
    var element=document.getElementById(date.id).parentNode; 

    if(!result===true) 
    { 
     element.appendChild(para); 
    } 

    else 
    { 

     element.removeChild(para); 
    }  
}

這應該工作，雖然我不會推薦它。

來源

2013-08-26 21:54:39

它更容易保持對隱藏，只顯示和隱藏根據您的需要，例如

<p id="para">Enter a valid Date</p>

要，顯示/隱藏，你可以使用

document.getElementById('para').style.display = 'none'; // hide 
document.getElementById('para').style.display = 'block'; // show

但是，既然你問刪除元素，所以你可以這樣做

var para = document.getElementById('para'); 
para.parentNode.removeChild(para);

但是，要做到這一點，你必須添加一個id對位whencreating像

var para=document.createElement("p"); 
para.id = 'para';

Node.removeChild on MDN

來源

2013-08-26 21:56:39

我建議你添加一個空<跨度ID = 「dateError」 > </SPAN >並改變它的內容。

但在你的代碼：

你缺少HTML中的最重要的屬性，當你想使用JavaScript：「ID」

您可以識別使用它們的ID每個元素。我修改了你的代碼，現在它正在工作。這是防止可能的重複過：

function checkDate(date) 
{  
var result; 
var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/; 
result = expression.test(date.value); 
var para=document.createElement("p"); 
var para.id = "dateError"; //NEW 
var node=document.createTextNode("Enter a valid Date"); 
para.appendChild(node); 
var element=document.getElementById(date.id).parentNode; 

if(!result===true) 
    { 
     if(document.getElementById("dateError") == null) return; //NEW 
     element.appendChild(para); 
    } 

    else 
    { 
     //element.removeChild(para); 
     document.getElementById("dateError").remove(); //NEW 
    } 

}

來源

2013-08-26 21:56:43 Kousha

給你的錯誤div一個唯一的ID，根據所輸入的ID。如果它不存在，只能重新創建它。這樣你可以爲每個輸入有不同的錯誤信息。

function checkDate(date) 
{  
    var result; 
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/; 

    result = expression.test(date.value); 

    var errid = date.id + "-error"; 

    var para = document.getElementById(errid); 
    var newp = false; 

    if (! para) { 
    newp = true; 
    var para=document.createElement("p"); 
    para.id = errid; 
    var node=document.createTextNode("Enter a valid Date"); 
    para.appendChild(node); 
    } 

    var element=document.getElementById(date.id).parentNode; 

    if(!result===true) 
    { 
     if (newp) 
     element.appendChild(para); 
    } 
    else 
    { 
     if (! newp) 
     element.removeChild(para); 
    } 
}

工作示例：http://codepen.io/paulroub/pen/HIDAC

來源

2013-08-26 21:57:39

刪除我剛剛在Javascript中添加的子節點

回答

相關問題