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操作の機能を持っている、それはあなたがJSの1行を書くような複雑な頼む何を作ります。

Answer 3

if(!document.getElementById)およびif(document.createElement)の条件を削除します。すべてのブラウザがサポートしていますが、サポートする価値のないものはサポートしていません。

DOMで作成した要素にremove-methodを追加するには、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/