Javascript函數添加/刪除字段

Question

我對JavaScript並不是很有經驗，但是這段代碼與我正在尋找的代碼類似，特別是它包含'刪除字段'鏈接的代碼。這裏是Javscript功能：

//Add more fields dynamically. 
function addField(field,area,limit) { 
    if(!document.getElementById) return; //Prevent older browsers from getting any further. 
    var field_area = document.getElementById(area); 
    var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. 
    //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
    //  field given in the argument is 'friend_' the last id will be 'friend_4'. 
    var last_item = all_inputs.length - 1; 
    var last = all_inputs[last_item].id; 
    var count = Number(last.split("_")[1]) + 1; 

    //If the maximum number of elements have been reached, exit the function. 
    //  If the given limit is lower than 0, infinite number of fields can be created. 
    if(count > limit && limit > 0) return; 

    if(document.createElement) { //W3C Dom method. 
     var li = document.createElement("li"); 
     var input = document.createElement("input"); 
     input.id = field+count; 
     input.name = field+count; 
     input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 
     li.appendChild(input); 
     field_area.appendChild(li); 
    } else { //Older Method 
     field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>"; 
    } 
} 

下面是該表單的HTML：

<form name="frm" method="POST"> 
<strong>Neutral List</strong><br /> 
<ol id="neutrals_area"> 
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li> 
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li> 
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li> 
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li> 
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li> 
</ol> 
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" /> 
</form> 

不過，我想更多的領域產生與「刪除鏈接」代碼，不只是那些與腳本中的代碼。我知道自定義函數必須進行調整以包含該行爲，但在嘗試使該函數發揮作用時遇到各種麻煩。這看起來非常簡單做在舊法繼「}其他{」在激活addField功能的底部通過編輯代碼如下：

} else { //Older Method 
    field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>"; 
} 

不過，我難倒就如何將其列入在W3C DOM方法中？

Answer 1

我會與卡帕到不同的你，鼓勵你強烈地繼續做你正在做什麼。 JQUery對於它的功能非常棒，但它常常是一個柺杖，知道你在做什麼以及爲什麼在使用JavaScript時要做到這一點非常重要。特別是如果你正在學習在這個領域找到工作，你將需要直接的JavaScript。

好消息，你要做的事實際上很簡單！

var li = document.createElement("li"); 
    var input = document.createElement("input"); 
    input.id = field+count; 
    input.name = field+count; 
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 
    li.appendChild(input); 
    field_area.appendChild(li); 
    //create the removal link 
    removalLink = document.createElement('a'); 
    removalLink.onclick = function(){ 
     this.parentNode.parentNode.removeChild(this.parentNode) 
    } 
    removalText = document.createTextNode('Remove Field'); 
    removalLink.appendChild(removalText); 
    li.appendChild(removalLink); 

下面是對的jsfiddle代碼：http://jsfiddle.net/r9bRT/

Answer 2

我強烈建議你去看看jQuery的（ORA類似：原型，motools等）

他們有全功能的DOM操作功能，使你問複雜如寫1線的js 。

Answer 3

刪除那些if(!document.getElementById)和if(document.createElement)的條件。每個瀏覽器都支持它們，而那些不值得支持的（讓他們拋出錯誤）。

要將remove方法添加到DOM創建的元素，只需使用onclick屬性。您也可以使用standard-compliant addEventListner()，但這需要針對IE的一些解決方法。請參閱部分Legacy Internet Explorer and attachEvent和Older way to register event listeners。

因此，代碼將

... 
li.appendChild(document.createTextNode(" "); 
var a = document.createElement("a"); 
a.appendChild(document.createTextNode("Remove Field")); 
a.style = "cursor:pointer;color:blue;"; 
a.onclick = function() { 
    // this.parentNode.parentNode.removeChild(this.parentNode); 
    // nay. we have better references to those objects: 
    field_area.removeChild(li); 
}; 
li.appendChild(a); 

http://jsfiddle.net/wtX7Y/2/