JavaScript로 요소를 제거하려는 시도가 잘못되었습니다.

Question

다음과 같은 시스템을 사용하는 양식이 있습니다. 필드와 해당 레이블은 float: left이고 필드를 채우는 방법을 설명하는 확장 된 설명은 왼쪽 여백이 넓은 오른쪽으로 나타납니다. 에릭 마이어 책의 제안에 따라
, 나는 두 가지를 정렬하기 위해 시간을 사용 : 내가 함께 스타일 hr을 넣어 :

.lineup { clear:both; visibility: hidden} 

그럼 내가 원하는 때 코멘트 표시를 만들기 위해 자바 스크립트를 사용합니다.
위와 같은 기능은 훌륭합니다. (Safari의 이상한 문제인 경우) 댓글이 너무 길 때 나타나는 다른 양식 콘텐츠를 "푸시 다운"하는 경우를 제외하고는 효과가 있습니다.
그래서 저는 페이지 빌드에서 실행되는 JavaScript 함수를 작성하여 hr의 offsetTop을 삭제하고 모든 설명을 어스의 위치 근처로 옮길 수 있다고 말했습니다.
하지만 시간을 없애 버릴 수는 없습니다.

마지막 코드 : 나는 지금까지의 모두의

var hrListY = new Array();    // Y-coordinates of HR "lineup" elements 

// Moves all descriptions so their middle is where the top used to be, and 
// removes the <hr>s previously used to position them. 

function relayoutDescriptions() { 
     var hrs = document.getElementsByTagName("hr"); 
     alert('hrs.length = ' + hrs.length); 
     var i; 
     for (i = 0; i < hrs.length; i++) { 
       var hr = hrs[i]; 
       if (hr.className == 'lineup') { 
         hrListY.push(hr.offsetTop); 
         alert('Got an HR element: Y = ' + hr.offsetTop + ' parentNode class = "' + hr.parentNode.className + '"'); 
         hr.parentNode.removeChild(hr); 
         } 
       } 

// Now we have a list of Y-coordinates of HR elements, hrListY. We use it 
// to adjust the offsetTop's of the -desc divs. For each one, we adjust the 
// offsetTop so the center of the div is at the height where the HR was. 

     } 

. 그것은 offsetTop과 그럴듯한 부모 노드 클래스에 대해 나에게 합리적인 오름차순 숫자를 제공하지만, 결과 레이아웃은 명확하게 보여 주며, 방화 광구가 확인해도 hr은 아직 거기에 있음을 확인합니다.

도움 말?

P.
JQuery를 사용하여이 작업을 수행하는 쉬운 방법이 있다면, 필자는이 작업을 수행 할 수 있지만 실제로 $ @ # & * %이 (가) 진행되고 있음을 알고 싶습니다.

감사합니다.

Answer 1

getElementsByTagName에 의해 반환 된 노드 목록은 라이브입니다. 즉, DOM에서 해당 요소 중 하나를 제거하면 오른쪽으로 이동 한 항목이 왼쪽으로 이동하므로 모든 두 번째 항목 만 제거됩니다. http://www.w3.org/TR/DOM-Level-2-Core/core.html에서

는 DOM에서

있는 NodeList와 NamedNodeMap입니다 오브젝트는 라이브입니다; 즉, 기본 문서 구조에 대한 변경 사항이 모든 관련 NodeList 및 NamedNodeMap 객체에 반영됩니다.

루프 내부에서 alert('hrs.length = ' + hrs.length);을 움직여 볼 수 있습니다. 매번 다른 번호로 알려줍니다.

이 문제를 해결하려면, 당신은 목록

var myNodeList = document.getElementsByTagName('HR'); 
myNodeList = Array.prototype.slice.call(myNodeList); 

을 복사하거나

var myNodeList = document.getElementsByTagName('HR'); 
for (var i = myNodeList.length; --i >= 0;) { 
    ... 
} 

을 오른쪽에서 왼쪽을 반복 할 수 있도록 항목을 제거 할 때, 이동 오른쪽으로 아무것도 없다는 것을 귀하의 색인 생성을 엉망으로 만들었습니다.