스스로 제거 할 수있는 요소 만들기?

Question

학교 프로젝트로 라이트 박스를 만들고 있는데 jQuery를 사용할 수 없습니다. 나는 이미지가있다. 그것을 클릭하면 Javascript는 ID가 "overlay"인 투명한 div를 만듭니다. 나는 div를 제거하기 위해서 div를, parent를 제거하기를 원하지만 작동하지 않는다. 나는 그것이 아직 존재하지 않는 요소에 'onclick'링크를 할 수 없다는 사실과 관련이 있다고 생각합니다.

Answer 1

부모로부터 요소를 제거해야합니다. 이런 식으로 뭔가가 :

d.style.display = 'none'; 

을 그리고, 오 :

d = document.getElementById('overlay'); 
d.parentNode.removeChild(d); 

또는 당신은 단지 그것을 숨길 수 당신은 온 클릭 속성에 함수를 할당하여 (새로 생성) 요소에 자바 스크립트 코드를 추가 할 수 있습니다. 나는 그것을

d = document.createElement('div'); 
d.onclick = function(e) { this.parentNode.removeChild(this) }; 

Answer 2

태그에 onclick 핸들러를 사용하지 말고 addEventListener과 같은 Javascripts 이벤트 기능을 사용하여 요소에 이벤트를 동적으로 추가하십시오. 또한 요소를 제거 할 때 모든 참조를 적절히 정리해야합니다 (즉, 이벤트 핸들러 등록 취소).

Answer 3

: 나는 슬픈 바트처럼 그 일을했지만, 그것은 작동하지 않았다. 내 코드는 다음과 같이 보입니다.

image.onclick = function(){ *create overlay*}; 
overlay.oncklick = function() {*overlay.parentNode.removeChild(overlay)*}; 

브라우저가 좋아요? 코드를 읽고 "사용자가 존재하지 않는 요소를 클릭했는지 확인할 수 없다"고 생각하기 때문입니다. 나는 이렇게했다 :

image.onclick = function(){ 

*create overlay* 

overlay.onclick = function() {*remove overlay*}; 
};