Cara menambahkan tombol hapus di javascript

Question

Anda dapat menambahkan atau menghapus item daftar dari kontrol ListView menggunakan metode dan. Lihat langkah-langkah berikut untuk menambah atau menghapus item daftar

Table of Contents Show

Bagaimana cara membuat tombol tambah dan hapus di JavaScript?
Bagaimana menambah dan menghapus dalam JavaScript?
Bagaimana Anda menambahkan tombol di JavaScript?
Apakah ada fungsi hapus di JavaScript?

Render ListView dengan sumber data, dan gunakan properti untuk menambahkan ikon hapus untuk setiap item daftar. Juga, ikat acara klik untuk ikon hapus menggunakan penangan
Render tombol Add Item, dan ikat event klik. Pada click event handler, berikan data dengan id acak ke metode untuk menambahkan item daftar baru saat mengklik tombol Add Item
Ikat penangan klik ke ikon hapus yang dibuat pada langkah 1. Dalam acara klik, hapus item daftar dengan meneruskan item daftar ikon hapus ke metode





            
    Essential JS 2 for ListView 
    
    
    
    
    
    
    
    
    
    



    Loading....
    
        
         Add Item

Harap berikan informasi tambahan

Terima kasih atas umpan balik dan komentar Anda. Kami akan memperbaiki ini sesegera mungkin

Mari kita mulai dengan membuat komponen

// 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 dan memperbarui antarmuka pengguna komponen

// 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 kita

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 */}
                                
                            
                        
                    
        
    );
}

Seperti inilah tampilan PagesList sekarang

Dalam data Gutenberg, kami menghapus rekaman entitas dari WordPress REST API menggunakan tindakan

// 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. Itu mengirimkan permintaan, memproses hasilnya, dan memperbarui data yang di-cache dalam status Redux

Inilah cara Anda dapat mencoba menghapus rekaman entitas di alat pengembang browser Anda

// 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.

_

Setelah permintaan REST API selesai, Anda akan melihat salah satu halaman telah hilang dari daftar. Ini karena daftar itu diisi oleh hook

// 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 dan pemilih

// 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. Setiap kali data yang mendasarinya berubah, daftar akan dirender ulang dengan data baru. Itu cukup nyaman

Mari kita kirim tindakan itu ketika

// 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 diklik

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

_

Mungkin perlu beberapa saat agar permintaan REST API selesai setelah mengeklik tombol Hapus. Mari komunikasikan dengan komponen

// 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 mirip dengan apa yang kita lakukan di bagian sebelumnya dari tutorial ini

Kami membutuhkan pemilih

// 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 untuk itu. Ini mirip dengan pemilih

// 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 yang telah kita lihat di bagian 3. ia mengembalikan

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

_0 atau

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

1 dan tidak pernah mengeluarkan permintaan HTTP apa pun

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

Inilah tampilannya saat beraksi

Kami dengan optimis berasumsi bahwa operasi penghapusan akan selalu berhasil. Sayangnya, di balik layar, ini adalah permintaan REST API yang bisa gagal dalam banyak hal

Website bisa down
Permintaan hapus mungkin tidak valid
Sementara itu, halaman tersebut mungkin telah dihapus oleh orang lain

Untuk memberi tahu pengguna saat salah satu dari kesalahan ini terjadi, kita perlu mengekstrak informasi kesalahan menggunakan pemilih

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

2

// Replace 9 with an actual page ID
wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )

Inilah cara kami dapat menerapkannya di

// 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

import { useEffect } from '@wordpress/element';
const DeletePageButton = ({ pageId }) => {
    // ...
    const { error, /* .. */ } = useSelect(
        select => ( {
            error: select( coreDataStore ).getLastEntityDeleteError( 'postType', 'page', pageId ),
            // ...
        } ),
        [pageId]
    );
    useEffect( () => {
        if ( error ) {
            // Display the error
        }
    }, [error] )

    // ...
}

Objek

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

4 berasal dari

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

5 dan berisi informasi tentang kesalahan. Ini memiliki sifat-sifat berikut

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

_6 – pesan kesalahan yang dapat dibaca manusia seperti

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 – kode kesalahan berbasis string seperti

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

9. Untuk mempelajari tentang semua kemungkinan kode kesalahan, Anda perlu merujuk ke

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

1 (opsional) – detail kesalahan, berisi properti

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

8 yang berisi kode respons HTTP untuk permintaan yang gagal

Ada banyak cara untuk mengubah objek tersebut menjadi pesan kesalahan, tetapi dalam tutorial ini, kami akan menampilkan

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

3

WordPress memiliki pola yang mapan untuk menampilkan informasi status menggunakan komponen

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

4. Inilah tampilannya di editor Widget

Mari gunakan jenis notifikasi yang sama di plugin kita. Ada dua bagian untuk ini

Menampilkan notifikasi
Mengirim notifikasi

Aplikasi kami hanya tahu cara menampilkan halaman tetapi tidak tahu cara menampilkan notifikasi. Mari kita ceritakan

WordPress dengan mudah memberi kita semua komponen React yang kita perlukan untuk membuat notifikasi. Komponen bernama

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

_4 mewakili satu notifikasi

Kami tidak akan menggunakan

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

_4 secara langsung. Kami akan menggunakan komponen

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

_7, yang dapat menampilkan banyak pemberitahuan menggunakan animasi halus dan secara otomatis menyembunyikannya setelah beberapa detik. Faktanya, WordPress menggunakan komponen yang sama dengan yang digunakan di editor Widget dan halaman wp-admin lainnya

Mari buat komponen ________15______8 kita sendiri

import { SnackbarList } from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';

function Notifications() {
    const notices = []; // We'll come back here in a second!

    return (
        
    );
}

Struktur dasarnya sudah ada, tetapi daftar notifikasi yang ditampilkannya kosong. Bagaimana kita mengisinya? .

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

_9

Begini caranya

import { SnackbarList } from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';

function Notifications() {
    const notices = useSelect(
        ( select ) => select( noticesStore ).getNotices(),
        []
    );
    const { removeNotice } = useDispatch( noticesStore );
    const snackbarNotices = notices.filter( ({ type }) => type === 'snackbar' );

    return (
        
    );
}

function MyFirstApp() {
    // ...
    return (
        
            {/* .. */}
            
        
    );
}

Tutorial ini difokuskan untuk mengelola halaman dan tidak akan membahas cuplikan di atas secara detail. Jika Anda tertarik dengan detail

const DeletePageButton = ({ pageId }) => {
    // ...
    const { isDeleting } = useSelect(
        select => ({
            isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ),
        }),
        [ pageId ]
    )
    return (
        
            { isDeleting ? (
                <>
                    
                    Deleting...
                
            ) : 'Delete' }
        
    );
}

9, halaman buku pegangan adalah tempat yang baik untuk memulai

Sekarang kami siap memberi tahu pengguna tentang kesalahan apa pun yang mungkin terjadi

Dengan adanya komponen SnackbarNotices, kami siap mengirimkan beberapa notifikasi. Begini caranya

import { store as noticesStore } from '@wordpress/notices';
import { useEffect } from '@wordpress/element';
function DeletePageButton( { pageId } ) {
    const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
    // useSelect returns a list of selectors if you pass the store handle
    // instead of a callback:
    const { getLastEntityDeleteError } = useSelect( coreDataStore )
    const handleDelete = async () => {
        const success = await deleteEntityRecord( 'postType', 'page', pageId);
        if ( success ) {
            // Tell the user the operation succeeded:
            createSuccessNotice( "The page was deleted!", {
                type: 'snackbar',
            } );
        } else {
            // We use the selector directly to get the fresh error *after* the deleteEntityRecord
            // have failed.
            const lastError = getLastEntityDeleteError( 'postType', 'page', pageId );
            const message = ( lastError?.message || 'There was an error.' ) + ' Please refresh the page and try again.'
            // Tell the user how exactly the operation has failed:
            createErrorNotice( message, {
                type: 'snackbar',
            } );
        }
    }
    // ...
}

Besar.

// 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 sekarang sepenuhnya menyadari kesalahan. Mari kita lihat pesan kesalahan itu beraksi. Kami akan memicu penghapusan yang tidak valid dan membiarkannya gagal. Salah satu cara untuk melakukannya adalah mengalikan

// Replace 9 with an actual page ID
wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )

2 dengan angka yang besar

function DeletePageButton( { pageId, onCancel, onSaveFinished } ) {
    pageId = pageId * 1000;
    // ...
}

Setelah Anda me-refresh halaman dan mengklik tombol

// Replace 9 with an actual page ID
wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )

3, Anda akan melihat pesan kesalahan berikut

Fantastis. Kami sekarang dapat menghapus baris

// Replace 9 with an actual page ID
wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )

_4

Sekarang mari kita coba benar-benar menghapus halaman. Inilah yang akan Anda lihat setelah menyegarkan browser Anda dan mengklik tombol Hapus

Bagaimana cara membuat tombol tambah dan hapus di JavaScript?

JavaScript menggunakan tipe HTMLSelectElement untuk mewakili elemen Gunakan metode add() dari HTMLSelectElement untuk menambahkan opsi ke elemen Gunakan metode remove() dari HTMLSelectElement untuk menghapus opsi dari elemen .

Bagaimana menambah dan menghapus dalam JavaScript?

Dalam program JavaScript, Anda dapat menggunakan metode “appendChild()” dan “insertBefore()” untuk menambahkan elemen HTML dan menghapus elemen HTML “remove() . .

Bagaimana Anda menambahkan tombol di JavaScript?

Membuat objek tombol. Objek tombol dapat dibuat menggunakan JavaScript. Dokumen. metode createElement() digunakan untuk membuat elemen . Setelah membuat objek tombol, gunakan metode appendChild() untuk menambahkan elemen tertentu (seperti div) untuk menampilkannya.