Tạo một yếu tố có thể tự xóa nó?

Question

Tôi đang tạo hộp đèn làm dự án trường học và tôi không thể sử dụng jQuery. Tôi có một hình ảnh. Khi bạn nhấp vào nó, Javascript sẽ tạo một div trong suốt với ID "lớp phủ". Tôi muốn div để loại bỏ chính nó, hoặc cha mẹ để loại bỏ nó, nhưng nó không hoạt động. Tôi nghĩ rằng nó đã làm với thực tế là bạn không thể liên kết 'onclick' với một yếu tố chưa tồn tại.

Answer 1

Bạn phải xóa phần tử khỏi phần tử gốc. Một cái gì đó như thế này:

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

Hoặc bạn chỉ có thể giấu nó:

d.style.display = 'none'; 

Và, oh: bạn có thể thêm mã Javascript vào một yếu tố (mới được tạo ra) bằng cách gán một hàm vào thuộc tính onclick.

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

Answer 2

Không sử dụng trình xử lý onclick trong thẻ, sử dụng các hàm sự kiện Javascripts chẳng hạn như addEventListener để tự động thêm sự kiện vào các phần tử. Bạn cũng nên chắc chắn rằng khi bạn loại bỏ các yếu tố bạn làm sạch đúng tất cả các tài liệu tham khảo của bạn (nói cách khác, unregister xử lý sự kiện).

Answer 3

Tôi đã có nó :) Tôi đã làm điều đó như bart buồn, nhưng nó không hoạt động. mã của tôi trông giống như sau:

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

trình duyệt sẽ giống như wtf? gây ra nó đọc mã và nghĩ rằng "tôi không thể kiểm tra nếu người dùng đã nhấp vào một phần tử không tồn tại." Vì vậy, tôi đã làm điều này:

image.onclick = function(){ 

*create overlay* 

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