HTML 요소를 동적으로 생성 및 제거

-1

어떻게 HTML 요소를 동적으로 만들 수 있으며, 그 요소로 무언가를 한 다음 제거해야합니다. 하지만 실제로 삭제되는 것이 중요합니다. 기능 "의 createElement()는"자주 호출받을 수 있기 때문에,HTML 요소를 동적으로 생성 및 제거

var newdiv = document.createElement('div'); 
newdiv.setAttribute('id','MyDiv'); 
$('#MyDiv').css({'width':'100px','height':'100px'}); 
$('#MyDiv').html('This is a test'); 

$('#MyDiv').remove(); // It should be work ? 

// Is it possible to delete it as follows? 
newdiv.remove();

내가 언급 한 바와 같이, 정말 요소를 제거하는 것이 중요하다 : 여기 내 접근 방식입니다.

새로 만든 HTML 요소가 실제로 제거되었는지 어떻게 테스트 할 수 있습니까?

나는 요소가 여전히 존재하는지 여부에 관계없이 다음과 같이 테스트하지만 항상 사실입니다!

alert( $('#MyDiv').length == 1);

아래에는 두 개의 링크가 있지만 내 문제를 해결하기에 충분하지 않았습니다.

setting the id attribute of an input element dynamically

createElement and delete DOMElement

감사합니다. 당신이 jQuery를 사용할 수있는 경우

출처

2014-10-12 user3815508

왜 div를 만들고 편집 한 다음 dom에 추가하지 않고 제거해야하는 이유는 무엇입니까? – BeNdErR

jQuery와 일반 Javascript의 혼합이 조금 아플 수 있습니다. 'newdiv.parentNode.removeChild (newdiv)'를 시도해보십시오. –

DOM에 newdiv을 삽입하지 않았으므로 DOM에서 제거 할 수 없습니다. 게다가 newdiv의 ID는'# MyDiv'이지만'$ ('# MyDiv')'는 ID가 MyDiv 인 요소를 얻습니다. –

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    var div = document.createElement("div"); 
    $(function(){ 
     $("body").append(div); 
     $(div).css({'width':'100px','height':'100px','border':'solid 1px black'}).html('This is a test'); 
     //$(div).remove(); 
    }); 
    </script> 
    </head> 
    <body> 
    </body> 
</html>

// $ (div) .remove();

출처

2014-10-12 22:31:45 dTobon

예, 정확하게! 그게 내가 찾고 있던거야. 그것은 아주 잘 작동하고, 생성 된 객체는 삭제 될 수 있습니다. :). 고맙습니다! – user3815508

다음에 시도 할 수 있습니다 : 모든

$("body").append("<div id="MyDiv">This is a test</div>"); // Create MyDiv div before </body> tag (you can use .prepend(...) to create it after <body>) 

$("#MyDiv").css({'width':'100px','height':'100px'}); // Give some style to MyDiv 

$("#MyDiv").remove(); // Delete MyDiv

출처

2014-10-12 21:51:16

하지만 createElement() 함수를 사용하고 싶습니다. 내가 만든 요소를 삭제하는 것이 중요합니다. – user3815508

이것을 확인하십시오 : 'g = document.createElement ('div'); g.setAttribute ("id", "MyDiv"); g.innerHTML = "이것은 테스트입니다" " –

" "

This is a test

"'은 구문 오류를 생성합니다. 대신 '

This is a test

'을 사용하십시오. –

첫째, 난 당신이이 줄을 코드에서 오류를 참조하십시오의

newdiv.setAttribute('id','#MyDiv')

값을 id 속성에는 '#'(해시 기호)가 없어야합니다. 코드 요소 newdiv에 "#MyDiv"와 같은 ID가 있지만 jQuery에 대한 ID가 유효하지 않습니다.이 템플릿을 ID Selector ("# idName")

요 u 방법을 사용하여 요소를 동적으로 삭제할 수 있지만 이전에 jQuery.append (요소/선택기) 메서드를 사용하여 페이지의 다른 요소에 추가해야한다고 생각합니다.

출처

2014-10-12 21:53:16 lexeek

DOM에서 요소를 열지 않으면 삭제할 수 없다는 의미입니다. – user3815508

실제로 DOM에 없을 때 요소가 생성되는 곳은 어디입니까? 나는 모든 요소가 DOM에서 생성된다고 생각했다. 좋아, 나는 그것에 대해 더 잘 조사 할 것이다 :). – user3815508

>> 그럼 삭제할 수 없습니다 아니요, 삭제할 수 있습니다. 생성 된 요소는 메모리에 저장됩니다. 원하는대로 작업 할 수 있습니다 (newdiv). 하지만 jquery를 사용하고 선택기로 요소를 찾으려고하면 요소가 DOM에 있다고 가정합니다. 다른 경우에는 요소를 찾을 수 없습니다. – lexeek

HTML 요소를 동적으로 생성 및 제거

답변

관련 문제