Nút xóa javascript

Question

Để tạo, hãy sử dụng phương thức add(), trong khi để xóa phần tử đã tạo và được thêm vào, bạn có thể sử dụng remove(). Sau đây là mã -

Nội dung chính Show

Làm cách nào để xóa bằng nút bấm trong JavaScript?
Làm cách nào để xóa một nút trong HTML?
Có chức năng xóa trong JavaScript không?
Làm cách nào để thêm biểu tượng xóa trong JavaScript?

Ví dụ

Bản thử trực tiếp

Document

Add A New Name

AddName

Để chạy chương trình trên ta lưu tên file “anyName. html(chỉ mục. html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Open with Live Server” trong VS Code editor

đầu ra

Điều này sẽ tạo ra đầu ra sau -

Ở đây, tôi đang thêm hai tên, đó là John, David. Ảnh chụp nhanh như sau. Trước tiên hãy thêm “John” và nhấp vào “AddName” −

Nhấp vào nút “AddName”. Bạn sẽ nhận được đầu ra sau -

Bây giờ bạn cũng có thể làm với David. Sau khi thêm cả hai tên, bạn sẽ nhận được đầu ra mẫu sau

Hãy bắt đầu bằng cách tạo thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

1 và cập nhật giao diện người dùng của thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

2 của chúng ta

import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const DeletePageButton = () => (
    
        Delete
    
)

function PagesList( { hasResolved, pages } ) {
    if ( ! hasResolved ) {
        return ;
    }
    if ( ! pages?.length ) {
        return No results;
    }

    return (
        
                { pages?.map( ( page ) => (
                    
                ) ) }
            
            
                
                    Title
                    Actions
                
            
            
                        { decodeEntities( page.title.rendered ) }
                        
                            
                                
                                {/* ↓ This is the only change in the PagesList component */}
                                
                            
                        
                    
        
    );
}

Đây là giao diện của PagesList bây giờ

Trong dữ liệu Gutenberg, chúng tôi xóa các bản ghi thực thể khỏi WordPress REST API bằng cách sử dụng tác vụ

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

3. Nó gửi yêu cầu, xử lý kết quả và cập nhật dữ liệu được lưu trong bộ nhớ cache ở trạng thái Redux

Đây là cách bạn có thể thử xóa bản ghi thực thể trong công cụ phát triển của trình duyệt

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

Khi yêu cầu API REST kết thúc, bạn sẽ thấy một trong các trang đã biến mất khỏi danh sách. Điều này là do danh sách đó được điền bởi móc

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

4 và bộ chọn

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

5. Bất cứ khi nào dữ liệu cơ bản thay đổi, danh sách sẽ được hiển thị lại với dữ liệu mới. Điều đó khá thuận tiện

Hãy gửi hành động đó khi nhấp vào

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

1

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

Có thể mất vài phút để yêu cầu API REST hoàn tất sau khi nhấp vào nút Xóa. Hãy truyền đạt điều đó với một thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

7 tương tự như những gì chúng ta đã làm trong các phần trước của hướng dẫn này

Chúng tôi sẽ cần bộ chọn

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

8 cho điều đó. Nó tương tự như bộ chọn

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

9 mà chúng ta đã thấy trong phần 3. nó trả về

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

0 hoặc

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

1 và không bao giờ đưa ra bất kỳ yêu cầu HTTP nào

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

5

Đây là những gì nó trông giống như trong hành động

Chúng tôi giả định một cách lạc quan rằng thao tác xóa sẽ luôn thành công. Thật không may, về cơ bản, đó là một yêu cầu API REST có thể thất bại theo nhiều cách

Trang web có thể ngừng hoạt động
Yêu cầu xóa có thể không hợp lệ
Trang có thể đã bị xóa bởi người khác trong thời gian chờ đợi

Để thông báo cho người dùng khi xảy ra bất kỳ lỗi nào trong số này, chúng tôi cần trích xuất thông tin lỗi bằng cách sử dụng bộ chọn

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

2

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

7

Đây là cách chúng ta có thể áp dụng nó trong

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

1

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

9

Đối tượng

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

4 đến từ

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

5 và chứa thông tin về lỗi. Nó có các thuộc tính sau

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

6 – một thông báo lỗi mà con người có thể đọc được chẳng hạn như

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

7

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

8 – mã lỗi dựa trên chuỗi chẳng hạn như

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

9. Để tìm hiểu về tất cả các mã lỗi có thể xảy ra, bạn cần tham khảo

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

51 (tùy chọn) – chi tiết lỗi, chứa thuộc tính

const DeletePageButton = ({ pageId }) => {
    const { deleteEntityRecord } = useDispatch( coreDataStore );
    const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
    return (
        
            Delete
        
    );
}

8 chứa mã phản hồi HTTP cho yêu cầu không thành công

Có nhiều cách để biến đối tượng đó thành một thông báo lỗi, nhưng trong hướng dẫn này, chúng tôi sẽ hiển thị

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

53

WordPress có một mẫu hiển thị thông tin trạng thái đã được thiết lập bằng cách sử dụng thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

54. Đây là giao diện của trình chỉnh sửa Widget

Hãy sử dụng cùng loại thông báo trong plugin của chúng tôi. Có hai phần này

Hiển thị thông báo
Gửi thông báo

Ứng dụng của chúng ta chỉ biết hiển thị trang nhưng không biết hiển thị thông báo. Hãy nói với nó

WordPress thuận tiện cung cấp cho chúng tôi tất cả các thành phần React mà chúng tôi cần để hiển thị thông báo. Một thành phần có tên là

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

54 đại diện cho một thông báo

Chúng tôi sẽ không sử dụng ________ 154 trực tiếp, thông qua. Chúng tôi sẽ sử dụng thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

57, có thể hiển thị nhiều thông báo bằng hoạt ảnh mượt mà và tự động ẩn chúng sau vài giây. Trên thực tế, WordPress sử dụng cùng một thành phần được sử dụng trong trình chỉnh sửa Widget và các trang wp-admin khác

Hãy tạo các thành phần

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

58 của riêng chúng ta

import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const DeletePageButton = () => (
    
        Delete
    
)

function PagesList( { hasResolved, pages } ) {
    if ( ! hasResolved ) {
        return ;
    }
    if ( ! pages?.length ) {
        return No results;
    }

    return (
        
                { pages?.map( ( page ) => (
                    
                ) ) }
            
            
                
                    Title
                    Actions
                
            
            
                        { decodeEntities( page.title.rendered ) }
                        
                            
                                
                                {/* ↓ This is the only change in the PagesList component */}
                                
                            
                        
                    
        
    );
}

4

Cấu trúc cơ bản đã sẵn sàng, nhưng danh sách thông báo mà nó hiển thị trống. Làm thế nào để chúng ta điền vào nó? .

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

59

Đây là cách

import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const DeletePageButton = () => (
    
        Delete
    
)

function PagesList( { hasResolved, pages } ) {
    if ( ! hasResolved ) {
        return ;
    }
    if ( ! pages?.length ) {
        return No results;
    }

    return (
        
                { pages?.map( ( page ) => (
                    
                ) ) }
            
            
                
                    Title
                    Actions
                
            
            
                        { decodeEntities( page.title.rendered ) }
                        
                            
                                
                                {/* ↓ This is the only change in the PagesList component */}
                                
                            
                        
                    
        
    );
}

6

Hướng dẫn này tập trung vào việc quản lý các trang và sẽ không thảo luận chi tiết về đoạn mã trên. Nếu bạn quan tâm đến các chi tiết của

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

59, trang sổ tay là một nơi tốt để bắt đầu

Bây giờ chúng tôi đã sẵn sàng thông báo cho người dùng về bất kỳ lỗi nào có thể đã xảy ra

Với thành phần SnackbarNotices đã sẵn sàng, chúng tôi đã sẵn sàng gửi một số thông báo. Đây là cách

import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const DeletePageButton = () => (
    
        Delete
    
)

function PagesList( { hasResolved, pages } ) {
    if ( ! hasResolved ) {
        return ;
    }
    if ( ! pages?.length ) {
        return No results;
    }

    return (
        
                { pages?.map( ( page ) => (
                    
                ) ) }
            
            
                
                    Title
                    Actions
                
            
            
                        { decodeEntities( page.title.rendered ) }
                        
                            
                                
                                {/* ↓ This is the only change in the PagesList component */}
                                
                            
                        
                    
        
    );
}

8

Tuyệt quá.

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

1 hiện đã hoàn toàn nhận thức được lỗi. Hãy xem thông báo lỗi đó đang hoạt động. Chúng tôi sẽ kích hoạt xóa không hợp lệ và để nó không thành công. Một cách để làm điều này là nhân

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

72 với một số lớn

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

1

Khi bạn làm mới trang và nhấp vào bất kỳ nút

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

73 nào, bạn sẽ thấy thông báo lỗi sau

Tuyệt vời. Bây giờ chúng ta có thể xóa dòng

// We need a valid page ID to call deleteEntityRecord, so let's get the first available one using getEntityRecords.
const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id;

// Now let's delete that page:
const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId );

// promise gets resolved or rejected when the API request succeeds or fails.

74

Bây giờ hãy thử thực sự xóa một trang. Đây là những gì bạn sẽ thấy sau khi làm mới trình duyệt của mình và nhấp vào nút Xóa

Làm cách nào để xóa bằng nút bấm trong JavaScript?

Để xóa phần tử khỏi DOM khi nhấp. .

Chọn phần tử DOM

Thêm trình xử lý sự kiện nhấp chuột vào phần tử

Gọi phương thức remove() trên phần tử trong trình xử lý sự kiện

Làm cách nào để xóa một nút trong HTML?

Chọn phần tử HTML cần xóa

Sử dụng phương thức JavaScript remove() và removeChild() để xóa phần tử khỏi tài liệu HTML

Có chức năng xóa trong JavaScript không?

Toán tử xóa xóa thuộc tính đã cho khỏi đối tượng . Khi xóa thành công sẽ trả về true, ngược lại trả về false.

Làm cách nào để thêm biểu tượng xóa trong JavaScript?

Thêm và xóa các mục danh sách khỏi listview trong JavaScript ListView. .

Kết xuất ListView với nguồn dữ liệu và sử dụng thuộc tính mẫu để nối thêm biểu tượng xóa cho từng mục danh sách. .

Kết xuất nút Thêm mục và liên kết sự kiện nhấp chuột. .

Liên kết trình xử lý nhấp chuột với biểu tượng xóa được tạo ở bước 1

programming javascript

Nút xóa javascript

Ví dụ

đầu ra

Làm cách nào để xóa bằng nút bấm trong JavaScript?

Làm cách nào để xóa một nút trong HTML?

Có chức năng xóa trong JavaScript không?

Làm cách nào để thêm biểu tượng xóa trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội