Xóa thuộc tính onclick JavaScript

Bài đăng này sẽ thảo luận về cách xóa phần tử đã cho và hậu duệ của nó khỏi DOM bằng JavaScript và jQuery

1. Sử dụng jQuery

Để xóa các thành phần đã chỉ định khỏi DOM, bạn có thể sử dụng của jQuery. phương thức remove() . Ví dụ sau minh họa cách sử dụng nó bằng cách xóa biểu mẫu đăng nhập khỏi DOM bằng cách nhấp vào nút xóa.

jQuery

1

2

3

4

5

$(tài liệu). sẵn sàng(chức năng() {

    $('#remove').nhấp chuột(chức năng() {

        $("#register").xóa();

    })

});

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

    rel="stylesheet" type="text/css"

    href="https. //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/css/khởi động. tối thiểu. css" />

Chỉnh sửa trong JSFiddle

2. Sử dụng JavaScript

Trong JavaScript đơn giản, bạn có thể lấy phần tử tương ứng bằng cách sử dụng phương thức getElementById() hoặc querySelector() và sau đó gọi phương thức remove() gốc trên đó. Sau đây là một ví dụ đơn giản chứng minh việc sử dụng phương pháp này.

JS

1

2

3

tài liệu. getElementById("xóa").onclick = chức năng() {

    tài liệu. getElementById("đăng ký").xóa();

}

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

    rel="stylesheet" type="text/css"

    href="https. //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/css/khởi động. tối thiểu. css" />

Chỉnh sửa trong JSFiddle

 
Một giải pháp khác để xóa phần tử DOM là đặt thuộc tính outerHTML của phần tử thành chuỗi rỗng.

JS

1

2

3

tài liệu. getElementById("xóa").onclick = chức năng() {

    tài liệu. getElementById("đăng ký").HTML bên ngoài = "";

}

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

    rel="stylesheet" type="text/css"

    href="https. //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/css/khởi động. tối thiểu. css" />

Chỉnh sửa trong JSFiddle

 
Một cách hợp lý khác là truy cập vào cha của nó rồi xóa phần tử khỏi DOM bằng cách sử dụng removeChild() method.

JS

1

2

3

4

tài liệu. getElementById("xóa").onclick = chức năng() {

    var node = tài liệu.getElementById("đăng ký");

    nút. Node cha. removeChild(nút);

}

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

    rel="stylesheet" type="text/css"

    href="https. //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/css/khởi động. tối thiểu. css" />

Chỉnh sửa trong JSFiddle

Đó là tất cả về việc xóa một phần tử khỏi DOM trong JavaScript và jQuery

Làm cách nào để xóa thuộc tính JavaScript?

Làm cách nào để xóa thuộc tính lớp trong JavaScript?

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

Làm cách nào để bật sự kiện onclick trong JavaScript?