node.removeChild (자식)에 의한 이상한 동작

나는 테이블과 체크 박스의 매우 기본적인 레이아웃을 만들었습니다. 8 개의 텍스트 상자와 8 개의 행이 하나의 테이블에 있습니다. 방금 체크 박스 검사에 행을 추가하고 선택을 취소하려고했습니다.node.removeChild (자식)에 의한 이상한 동작

그래서 두 가지 기능을 사용하고 있습니다.

hide 함수에서 하나의 removeChild 문만 사용하면 작동하지 않습니다. 두 개를 사용하면 콘솔에 오류가보고되지만 완벽하게 작동합니다.

이유를 아는 사람이 있으면 코드에 오류가있는 것이 윤리적이지 않으므로 알려주십시오.

편집 # 1 :

function show(input) { 
    var tbody = document.getElementById("tbody"); 
    if (document.contains(document.getElementById("tr" + input))) { 
     hide('tr' + input); 
    } 
    if (!document.contains(document.getElementById("tr" + input))) { 
     tbody.appendChild(getRow(input)); 
    } 
}

는 먼저, 그래서 그것을 숨길 경우, 노드가있는 경우 확인 : JsFiddle

출처

2013-11-22 Saurabh Saxena

문제를 나타내는 [fiddle] (http://jsfiddle.net/)을 제공 할 수 있습니까? – robertklep

코드는 괜찮은 것처럼 보이지만 바이올렛을 사용하면 누구에게나 시간이 많이 걸릴 것입니다. – Chandranshu

안녕하세요, jsFiddle 링크가 추가되었는지 확인하십시오. –

귀하의 문제는이 기능입니다. 다음으로 항상 노드가 이 아닌지 확인하고이 아닌지 확인한 다음 추가하십시오. 노드가 방금 숨겨 졌을 때 두 번째 검사는 true (방금 노드를 삭제했기 때문에)이며 노드가 다시 추가됩니다.

그래서 다시 쓰기 :

function show(input) { 
    var tbody = document.getElementById("tbody"); 
    if (document.contains(document.getElementById("tr" + input))) { 
     hide('tr' + input); 
    } else if (!document.contains(document.getElementById("tr" + input))) { 
     tbody.appendChild(getRow(input)); 
    } 
}

fiddle

출처

2013-11-22 09:15:08 robertklep

위대한 ... 내 잘못을 이해하십시오. –

요소의 즉각적인 재 페인트에 문제가있는 것 같은데, 여기에 나를 위해

var child = document.getElementById(input); 
setTimeout(function(){ 
     child.parentNode.deleteRow(child.rowIndex - 1);  
}, 1);

그리고 근무 더러운 방법입니다 테이블 요소를 추가/삭제하는 동안 테이블 특정 메소드를 사용하는 것이 안전합니다.

출처

2013-11-22 09:24:10 redV

굉장합니다. 완벽하게 작동합니다. –

node.removeChild (자식)에 의한 이상한 동작

답변

관련 문제