div에서 개별 텍스트 노드를 모두 제거하지 않고 제거하는 방법은 무엇입니까?

Question

동적으로 생성 된 개별 텍스트 노드를 제거하려면 어떻게합니까?

나는 입력을 즉시 생성하고 .createTextNode를 사용하여 요소 앞에 설명 텍스트를 배치하고 있습니다. 내가 만들고있는 특정 요소를 삭제할 수있는 능력이 필요합니다. 그것을 수행하는 .removeChild를 사용하고 있습니다. 그건 참조 (ID/이름) 뭔가가 있기 때문에 개별 입력을 제거하기 위해 잘 작동합니다. 각 텍스트 노드에 대한 일종의 참조를 설정하여 해당 입력 컨트롤과 함께 삭제할 수 있습니까?

var box = document.getElementById("myDiv"); 

box.appendChild(document.createTextNode('Status: ')); 
var inp = document.createElement('input'); 
inp.type = 'text'; 
// add attributes, etc... 

box.appendChild(inp); 

Answer 1

왜 필드 세트를 두 줄로 묶지 않으시겠습니까?

var box = document.getElementById("myDiv"); 

var field = document.createElement('fieldset'); 
field.appendChild(document.createTextNode('Status: ')); 
var inp = document.createElement('input'); 
inp.type = 'text'; 
// add attributes, etc... 

field.appendChild(inp); 
box.appendChild(field); 

이 방법으로 필드 요소를 제거하면 텍스트 노드와 입력 내용이 동시에 제거됩니다.

Answer 2

이 라인을 변경하는 경우 :

box.appendChild(document.createTextNode('Status: ')); 

사람 :

var textNode = document.createTextNode('Status: '); 
box.appendChild(textNode); 

는 그런 다음 textNode var에 참조 할 수 있습니다를 나중에 삭제합니다. 일부 브라우저는 인접한 텍스트 노드를 병합합니다.

Answer 3

var box = document.getElementById("myDiv"); 

var label = document.createTextNode('Status: ') 
box.appendChild(label); 
var inp = document.createElement('input'); 
inp.type = 'text'; 
// add attributes, etc... 

box.appendChild(inp); 

// do other stuff 

//remove the label 
label.nodeValue = ""; 

Answer 4

DOM의 텍스트 노드 목록에 포함 된 텍스트 노드를 제거하지 마십시오. DOM을 추가하기 전에 참조하는 경우에도 마찬가지입니다.

브라우저가 여러 텍스트 노드를 병합 할 수 있습니다! 나는 표준이 무엇인지는 모르지만 가능한 한 경험은 적어도 나에게 말했다. (오래된 브라우저일지도 모른다.)

대신에 span 또는 div 태그에 각 텍스트 노드를 래핑하거나 일부 텍스트 대체를 사용할 수 있습니다. 나는 이전을 선호 할 것이다. 그것에

Answer 5

보관할 참조 :

var txt = document.createTextNode('Status: '); 
box.appendChild(txt); 

다음에 제거 : 노드가 입력되기 직전에 있어야하는 경우

txt.parentNode.removeChild(txt); 

, 이것은 잘 작동합니다 :

inp.parentNode.removeChild(inp.previousSibling); 

innerHTML 또는 normalize()을 사용하지 않으면 작동합니다. c ould는 노드를 다시 만들거나 병합하여 참조를 무효화합니다.

노드에서 임의의 텍스트를 제거하려는 경우에는 textnode.splitText(offset)이 있습니다.