자바 스크립트 기능 필드 추가/제거 기능

Question

자바 스크립트에 익숙하지 않지만이 코드는 특히 '필드 제거'링크가있는 곳과 유사합니다. 여기

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

내가의 '링크 제거'코드뿐만 아니라 사람을 생성하기 위해 추가 필드를 싶습니다, 여기에 javscript 기능입니다 스크립트에 코드가 있습니다. 사용자 정의 함수는 해당 동작을 포함하도록 조정해야하지만 모든 기능을 작동 시키려면 문제가있는 것으로 알고 있습니다. 그것은 읽을 수있는 코드를 편집하여 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는 그것이 무엇인지에 대해 훌륭하지만, 너무 자주 버팀목이되며, 자바 스크립트로 작업 할 때 수행중인 작업과 수행중인 작업을 아는 것이 중요합니다. 특히 섹터에서 일하는 법을 배우면 스트레이트 자바 스크립트가 필요합니다.

좋은 소식은, 당신이하려는 것은 실제로 매우 간단합니다!

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

내가 강력하게 당신이 (ORA 유사한, motools 등 프로토 타입) jQuery를에 살펴보고 제안 그들은 완전한 기능을 갖춘 DOM 조작 기능을

을, 그 JS의 1 개 라인을 작성하는 당신이 복잡한 무엇을 물어하게 .

Answer 3

if(!document.getElementById) 및 if(document.createElement) 조건을 제거하십시오. 모든 브라우저는 지원하며, 지원할 가치가없는 것은 지원하지 않습니다 (오류를 버리도록하십시오).

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/