Làm cách nào để xóa div onclick trong JavaScript?

Tương tự như

$( ".hello" ).remove();
 Nội dung chính Show
 
Làm cách nào để xóa div bằng JavaScript?
Làm cách nào để xóa div động trong JavaScript?
Làm cách nào để xóa nút sau khi nhấp vào JavaScript?
Làm cách nào để ẩn phần tử onclick trong JavaScript?
 

7, phương thức

$( ".hello" ).remove();

8 đưa các phần tử ra khỏi DOM. Sử dụng

$( ".hello" ).remove();

8 khi bạn muốn xóa chính phần tử đó, cũng như mọi thứ bên trong nó. Ngoài bản thân các phần tử, tất cả các sự kiện ràng buộc và dữ liệu jQuery được liên kết với các phần tử đều bị xóa. Để xóa các thành phần mà không xóa dữ liệu và sự kiện, hãy sử dụng

$( ".hello" ).remove();

0 thay thế

Hãy xem xét HTML sau

1

2

3

4

<div class="container">
  <div class="hello">Hellodiv>
  <div class="goodbye">Goodbyediv>
div>

Chúng tôi có thể nhắm mục tiêu bất kỳ yếu tố nào để loại bỏ

1

$( ".hello" ).remove();

Điều này sẽ dẫn đến cấu trúc DOM với phần tử

$( ".hello" ).remove();

1 bị xóa

1

2

3

<div class="container">
  <div class="goodbye">Goodbyediv>
div>

Nếu chúng ta có bất kỳ số lượng phần tử lồng nhau nào bên trong

$( ".hello" ).remove();

2, thì chúng cũng sẽ bị xóa. Các cấu trúc jQuery khác như dữ liệu hoặc trình xử lý sự kiện cũng bị xóa

Chúng tôi cũng có thể bao gồm một bộ chọn làm tham số tùy chọn. Ví dụ: chúng ta có thể viết lại mã xóa DOM trước đó như sau

Tôi đã thử phương pháp dưới đây nhưng cả div cũ và div mới đều chứa các tập lệnh khác nhau nên không tải chính xác các tập lệnh trong div mới

document.getElementById("div1").style.display="block"; 
document.getElementById("div2").style.display="none";

Tôi đoán cách tốt nhất là thực sự loại bỏ div1 và thay thế bằng div2 tải mới?

làm thế nào tôi sẽ làm điều này?

tôi đã thử các giải pháp jquery nhưng trang web của tôi có vẻ không thích jquery. có ai biết tại sao không? . tôi đang tải jquery trong đầu 🙁

Nếu chúng được thêm động, thì liên kết sự kiện sẽ không thực sự tìm thấy bất kỳ phần tử nào và do đó sẽ không thực thi khi chúng được nhấp vào. Xử lý sự kiện này chạy cho bất kỳ phần tử nào bên trong

$( ".hello" ).remove();

0 khớp với bộ chọn

$(this).closest('div').remove();

0 khi chúng được nhấp

Bạn có thể thay thế

$( ".hello" ).remove();

0 bằng bộ chọn phù hợp với phần tử ổn định (tĩnh) có chứa các div mà bạn đang nhắm mục tiêu này, sử dụng

$(this).closest('div').remove();

2 nếu cần

Giải pháp liên quan

Javascript – hàm “tồn tại” cho jQuery

Trong JavaScript, mọi thứ đều là 'trung thực' hoặc 'giả dối' và đối với các số

$(this).closest('div').remove();

3 có nghĩa là

$(this).closest('div').remove();

4, mọi thứ khác là

$(this).closest('div').remove();

5. Vì vậy, bạn có thể viết

<div class="container">
  <div class="hello">Hellodiv>
  <div class="goodbye">Goodbyediv>
div>

2

Bạn không cần phần

$(this).closest('div').remove();

6 đó

Javascript – Thêm hàng của bảng trong jQuery

Cách tiếp cận mà bạn đề xuất không đảm bảo mang lại cho bạn kết quả mà bạn đang tìm kiếm - chẳng hạn nếu bạn có một

$(this).closest('div').remove();

7 thì sao

<div class="container">
  <div class="hello">Hellodiv>
  <div class="goodbye">Goodbyediv>
div>

5

Bạn sẽ kết thúc với những điều sau đây

<div class="container">



  <div class="hello">Hellodiv>
  <div class="goodbye">Goodbyediv>
div>

6

Do đó, tôi muốn giới thiệu phương pháp này thay thế

<div class="container">
  <div class="hello">Hellodiv>
  <div class="goodbye">Goodbyediv>
div>

7

Bạn có thể bao gồm bất kỳ thứ gì trong phương thức

$(this).closest('div').remove();

8 miễn là đó là HTML hợp lệ, bao gồm nhiều hàng như ví dụ trên

Cập nhật. Xem lại câu trả lời này sau hoạt động gần đây với câu hỏi này. không mí mắt đưa ra nhận xét hay rằng sẽ luôn có một

$(this).closest('div').remove();

7 trong DOM; . Nếu bạn không có hàng, sẽ không có

$(this).closest('div').remove();

7 trừ khi chính bạn đã chỉ định một hàng

DaRKoN_ đề xuất thêm vào

$(this).closest('div').remove();

7 thay vì thêm nội dung sau

$( ".hello" ).remove();

22 cuối cùng. Điều này xoay quanh vấn đề không có hàng, nhưng vẫn không chống đạn vì về mặt lý thuyết, bạn có thể có nhiều phần tử

$(this).closest('div').remove();

7 và hàng sẽ được thêm vào mỗi phần tử đó

Cân nhắc mọi thứ, tôi không chắc có một giải pháp một dòng duy nhất giải quyết mọi tình huống có thể xảy ra. Bạn sẽ cần đảm bảo rằng mã jQuery phù hợp với đánh dấu của bạn

Tôi nghĩ giải pháp an toàn nhất có lẽ là đảm bảo rằng

$( ".hello" ).remove();

24 của bạn luôn bao gồm ít nhất một

$(this).closest('div').remove();

7 trong phần đánh dấu của bạn, ngay cả khi nó không có hàng. Trên cơ sở này, bạn có thể sử dụng cách sau sẽ hoạt động cho dù bạn có bao nhiêu hàng (và cũng chiếm nhiều phần tử

$(this).closest('div').remove();

7)

Làm cách nào để xóa div bằng JavaScript?

Làm cách nào để xóa div động trong JavaScript?

Làm cách nào để xóa nút sau khi nhấp vào JavaScript?

Làm cách nào để ẩn phần tử onclick trong JavaScript?