JavaScript RemoveChild 논리/질문

Question

저는 Dojo 드래그 앤 드롭을 사용하고 있습니다.사용자가 컨테이너(div dojoType='dojo.dnd.Source')에 항목을 추가하면 나중에 사용자가 전체 페이지를 제출할 때 서버에서 처리할 수 있도록 해당 데이터를 양식으로 가져와야 합니다.그 부분이 작동하고 있습니다.그런 다음 항목을 제거하려면 항목을 "휴지통" 컨테이너에 끌어다 놓을 수 있도록 허용합니다.숨겨진 필드에서 항목을 제거하는 방법을 개념화하는 데 어려움을 겪고 있습니다.다음 두 함수를 호출하기 위한 구독/이벤트 코드가 이미 있습니다.

RemoveGoalFromHiddenFields 기능을 수행하는 더 좋은 방법이 있는지 알려주실 수 있나요?"하위 목표" 항목은 여러 개가 있을 수 있습니다.

아래에 있는 내용으로 테스트를 시작하려고 하는데 이에 대해 약간의 의문이 있습니다.

감사해요,

닐 월터스

   function addGoalToHiddenFields( goalText){
      var field = document.createElement("input");
      field.setAttribute("type","hidden");
      field.setAttribute("value",goalText);
      field.setAttribute("name","subgoal");

      //add new hidden-element to the existing form
      document.getElementById("form1").appendChild(field);
   }

   function removeGoalFromHiddenFields( goalText){

      //remove hidden field 
      nodes = document.getElementById("form1")
      for (i=0;i<nodes.length ;i++ )
           {
             var pos = nodes[i].innerHTML.IndexOf(goalText)
             if (pos > 0)
             {
                 nodes.removeChild(node[i]);

             }
           }

}

또한 대신 이렇게 할 수 있나요?노드 = document.getElementById("하위 목표")

Answer 1

여기서 원하는 것은 다음의 기능인 것 같습니다. 도장.쿼리.

다음과 같이 시도해 보세요:

dojo.query("#form1 input[value=\"" + goalText + "\"]").forEach(function(field) {
    field.parentNode.removeChild(field)
});

Answer 2

field.setAttribute("유형","숨김");

HTML 문서에서는 setAttribute를 사용하지 마세요.IE에는 버그가 많습니다.읽기 쉬운 일반 DOM-HTML 속성을 사용하세요.

field.type= 'hidden';

var pos = node[i].innerHTML.IndexOf(goalText)

HTML 마크업을 통해 값을 검색하는 것은 어리석은 일이며 HTML이 이스케이프하는 '<' 또는 '&'와 같은 문자가 goalText에 포함되어 있으면 작동하지 않습니다.

위 코드의 경우 다음과 같습니다. nodes[i] 다음 중 하나여야 합니다. <input> 거기에 추가한 요소는 다음과 같습니다. innerHTML 입력 내용만 검색하므로 좋지 않습니다. 입력은 빈 요소이므로 아무 것도 아닙니다.대신 다음을 살펴보세요. value 당신이 거기에 넣은 재산:

var input= nodes[i];
if (input.name=='subgoal' && input.value==goalText)
    input.parentNode.removeChild(input);

또한 대신 이렇게 할 수 있나요?노드 = document.getElementById("하위 목표")

아니요. 하위 목표 요소에는 ID가 없기 때문입니다.이름으로 가져오기:

var subgoals= form.getElementsByName('subgoal');

(DOM-0과 동일합니다.)

var subgoals= form.elements.subgoal;

또는 나중에 검색하는 데 도움이 되도록 각 하위 목표에 ID를 추가하세요.

field.id= 'id-'+goalText;

goalText에 특수 문자가 있으면 위의 내용은 다시 작동하지 않습니다.

또는 DOM에 모든 것을 넣는 대신 JavaScript에서 자체 조회를 유지하세요.

var subgoalfields= {};
...
// on add
subgoalfields[goalText]= field;
...
// on remove
subgoalfields[goalText].parentNode.removeChild(subgoalfields[goalText]);
delete subgoalfields[goalText];