Xóa hiển thị: chặn CSS

Bài viết này cung cấp thông tin về việc sử dụng phương thức remove() trong JavaScript và hiển thị. không có thuộc tính nào trong CSS

loại bỏ () – JavaScript

Tôi giả sử bạn có một trang HTML. Tạo Element div trong thẻ body, như hình bên dưới, mình truyền từ khóa này (có nghĩa là Element hiện hành)

1

<div onclick = "removeItems(this)>Test</div>

Kiểm tra các phần tử Chế độ xem HTML

Thêm thẻ script ở cuối thẻ body và viết mã như bên dưới

1

function removeItems(currentObject) { currentObject.xóa(); }

Bây giờ, khi bạn nhấp vào div, nó sẽ xóa khỏi DOM

đầu ra

Trong phương thức remove(), nút đã chọn sẽ bị xóa khỏi DOM và người dùng không thể xem phần tử đã chỉ định đó. Cũng xóa không gian được phân bổ. Sau khi xóa một nút khỏi DOM, nó không thể truy cập được đối với bất kỳ thay đổi nào đối với DOM

phương thức remove() không chấp nhận bất kỳ tham số nào

trưng bày. không – CSS

Thêm thẻ head trước thẻ body, sau đó thêm thẻ style để viết mã css. Tạo một phần tử div trong thẻ body, như đoạn mã dưới đây.  

1

2

<div class = "displayNonePractice1">Test1</div>

<div class = "displayNonePractice2">Test2</div>

Kiểm tra các phần tử Chế độ xem HTML

Thêm đoạn mã CSS bên dưới vào thẻ style

1

2

.displayNonePractice1{ display. chặn }

.displayNonePractice2{ display. không có }

khi chúng tôi áp dụng mã CSS ở trên vào phần tử div,. div displayNonePractice1 bị ẩn khỏi chế độ xem của người dùng nhưng vẫn có sẵn cho DOM

đầu ra

trong màn hình. không thuộc tính nào mà phần tử HTML đã chọn ẩn khỏi chế độ xem của người dùng, không gian sẽ bị xóa nhưng nó có thể truy cập được đối với DOM

Sự khác biệt chính là trong phương thức remove(), nút xóa khỏi DOM và xóa không gian của nó. Nhưng trong màn hình. none nó sẽ ẩn phần tử khỏi tài liệu, nhưng nó có sẵn cho DOM

Trong hướng dẫn này, hãy tìm hiểu cách xóa không hiển thị bằng jQuery. Câu trả lời ngắn gọn là sử dụng chức năng show() để xóa hiển thị. không có CSS ​​từ một phần tử với jQuery

Các thuộc tính không hiển thị được thêm vào thành phần để ẩn nó khỏi người dùng trên một trang. Bạn có thể xóa nó để hiển thị cho người dùng của mình khi nhấp vào nút. Hãy tìm với các ví dụ khác nhau được đưa ra dưới đây

Mục lục

Phương pháp 1 . Cách loại bỏ Hiển thị Không có bằng jQuery Hàm show()

Nếu bạn muốn xóa không hiển thị bằng jQuery, bạn có thể sử dụng show() không yêu cầu phải vượt qua đối số. Nó hiển thị phần tử ẩn trong một trang bằng cách xóa thuộc tính CSS display:none khỏi phần tử

Thí dụ

1

2

3

4

5

6

7

8

9

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

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

     $("p").hiển thị();

    });

});

kiểu="hiển thị. none;">Chào mừng đến với TutorialDeep.

loại="nút">< type="button">Remove Display None

đầu ra

Ví dụ trên chỉ hiển thị phần tử nút. Tuy nhiên, nó cũng chứa nội dung văn bản mà bạn sẽ nhận được khi nhấp vào nút. Bấm vào nút để xem nội dung văn bản ẩn

Phương pháp 2 . jQuery Xóa Hiển thị. Không Sử dụng Hàm css()

Để loại bỏ hiển thị none bằng jQuery, bạn có thể thêm display:block vào phần tử bằng cách sử dụng css() của jQuery. Hàm css() nhận hai đối số cách nhau bằng dấu phẩy. Đối số đầu tiên là "display" và đối số thứ hai là "block". Việc thêm phần này sẽ tự động xóa phần hiển thị không có phần tử

Thí dụ