삭제 된 DOM 요소가 여전히 페이지에 나타납니다.

DOM 요소 (id = "result")를 동적으로 추가/제거하려고합니다. 추가 기능은 정상적으로 작동하지만 제거한 후에도 요소가 페이지에 계속 표시됩니다.삭제 된 DOM 요소가 여전히 페이지에 나타납니다.

여기가 어떻게됩니까? 내가 도대체 뭘 잘못하고있는 겁니까?

<!DOCTYPE html> 
<html> 
    <body> 
    <script> 
     function clearResult() { 
     if (document.getElementById("result") != null){ 
      alert("remove #result"); 
      $("#result").remove(); 
      if (document.getElementById("result") != null) { 
       alert("#result still exists"); 
      } 
     } 
     alert("Exiting clearResult"); 
     } 

     function search() { 
     clearResult(); 
     if (document.getElementById("result") == null) { 
      alert("add #result"); 
      $('<table id="result"><tr>I am a table</tr></table>').appendTo('#ex'); 
     }     
     }  
    </script> 

    <div> 
     <button id="search" onclick="search()" value="Send">Search</button> 
    </div>  
    <div id="ex"> 
     @*Add result table here dynamically*@ 
    </div> 

    </body> 
</html>

출처

2014-07-21 NGambit

TD는 어디에 있습니까? ? –

귀하의 HTML이 잘못되었습니다

여기 내 코드입니다. 표 내의 콘텐츠는 td 개의 태그가 있어야합니다. 당신은 그 다음 #result 요소는 아무것도 할 것으로 보인다 제거 볼 수 있습니다

I am a table 
<table id="result"><tr></tr></table>

텍스트가 사라지지 않기 때문에,로 : 그없이, 코드가 렌더링되고있다. 당신이 td 요소를 포함하도록 코드를 변경하는 경우, 그것은 잘 작동 : 당신은 또한 대규모 코드를 단순화 할 수

$('<table id="result"><tr><td>I am a table</td></tr></table>').appendTo('#ex');

Example fiddle

참고. jQuery에서 요소를 제거하기 전에 요소의 존재 여부를 확인할 필요가 없습니다. 또한 오래된 on 속성 대신 jQuerys 이벤트 핸들러를 사용해야합니다. 이 시도 :

<div> 
    <button id="search" value="Send">Search</button> 
</div> 
<div id="ex"></div>

$('#search').click(function() { 
    $('#ex').empty().append('<table id="result"><tr><td>I am a table</td></tr></table>'); 
});

Updated fiddle

을 나는 선택을 저장 #ex 요소 여기에 empty()를 사용, 그것은 요소의 아이들 수행을 제외하고, remove()와 같은 동작을 가지고 있지 요소 그 자체.

출처

2014-07-21 17:06:18

삭제 된 DOM 요소가 여전히 페이지에 나타납니다.

답변

관련 문제