How to delete empty wp_postmeta

/* WP Snippets by lightweb-media.de */

function delete_empty_post_meta($post_id) {
    if (get_post_type($post_id) == 'post') {
        $post_meta = get_post_meta($post_id);
        foreach ($post_meta as $key => $value) {
            if (empty($value[0])) {
                delete_post_meta($post_id, $key);
            }
        }
    }
}
add_action('save_post', 'delete_empty_post_meta');

Something like this or witch function do you need?

So I have to combine both?

The sketch is the PHP solution to your question.

I cannot infer from your question what you are doing with JS.

I have register some meta

function register_meta() {
  function blocks_register_meta() {
        register_meta( 'post', '_tour_gallery_images', array(
            'single' => true,
            'type' => 'array',
            'show_in_rest' => array(
                'schema' => array(
                    'type' => 'array',
                    'items' => array(
                        'type' => 'number'
                    )
                )
            ),
            'sanitize_callback' => "",
            'auth_callback' => function() {
                return current_user_can( 'edit_posts' );
            }
        ) );

        register_meta( 'post', '_places_covered', array(
            'single' => true,
            'type' => 'string',
            'show_in_rest' => true,
            'sanitize_callback' => "sanitize_text_field",
            'auth_callback' => function() {
                return current_user_can( 'edit_posts' );
            }
        ) );
    }
    blocks_register_meta();
}

add_action( 'init', 'register_meta' );

This is the code for registering meta keys. Suppose any of the meta keys is empty I don’t want it to store it in the post meta.

This is the frontend code

import { __ } from "@wordpress/i18n";

import "./editor.scss";

import {
	MediaUpload,
	useBlockProps,
	BlockControls,
	MediaUploadCheck,
	MediaPlaceholder,
	InspectorControls,
} from "@wordpress/block-editor";

import {
	Modal,
	Button,
	PanelBody,
	ToolbarGroup,
	ToolbarButton,
	TextControl,
} from "@wordpress/components";

const { Fragment } = wp.element;

import { useEntityProp } from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";

import { useState, useEffect } from "@wordpress/element";


export default function Edit({ attributes, setAttributes }) {
	const [isOpen, setOpen] = useState(false);
	const openModal = () => setOpen(true);
	const closeModal = () => setOpen(false);
	const { gallery_image } = attributes;
	const [places, setPlaces] = useState("");

	const postType = useSelect((select) => {
		return select("core/editor").getCurrentPostType();
	}, []);

	const [meta, setMeta] = useEntityProp("postType", postType, "meta");

	useEffect(() => {
		upDateTheMeta();
	}, [gallery_image]);

	function upDateTheMeta() {
		let ids = gallery_image.map((_image) => _image.id);
		setMeta({ ...meta, _tour_gallery_images: ids });
	}

	const setGallery = (media) => {
		setAttributes({ gallery_image: media });
	};

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title={__("Places Covered")} initialOpen={true}>
					<TextControl
						value={places}
						type="text"
						onChange={(value) => setPlaces(value)}
					/>
				</PanelBody>
			</InspectorControls>
			<div {...useBlockProps()}>
				{gallery_image.length >= 1 ? (
					<BlockControls>
						<ToolbarGroup>
							<MediaUploadCheck>
								<MediaUpload
									multiple={true}
									onSelect={(media) => setGallery(media)}
									addToGallery={true}
									gallery={true}
									allowedTypes={["image"]}
									value={gallery_image.map((logo) => logo.id)}
									render={({ open }) => {
										return (
											<ToolbarButton
												label={__("Add Images")}
												onClick={open}
												icon="plus"
											/>
										);
									}}
								/>
							</MediaUploadCheck>
							<MediaUploadCheck>
								<MediaUpload
									multiple={true}
									onSelect={(media) => setGallery(media)}
									gallery={true}
									allowedTypes={["image"]}
									value={gallery_image.map((logo) => logo.id)}
									render={({ open }) => {
										return (
											<ToolbarButton
												label={__("Edit Images")}
												onClick={open}
												icon="edit"
											/>
										);
									}}
								/>
							</MediaUploadCheck>
							<ToolbarButton
								onClick={openModal}
								icon="trash"
								showTooltip="true"
								label={__("Remove Images")}
							/>
						</ToolbarGroup>
					</BlockControls>
				) : null}
				{isOpen ? (
					<Modal
						title="Do you want to remove all images?"
						onRequestClose={closeModal}
					>
						<div className="modal-dialog-button">
							<Button
								variant="secondary"
								onClick={() => {
									setGallery([]);
									closeModal();
								}}
							>
								Yes
							</Button>
							<Button variant="secondary" onClick={closeModal}>
								No
							</Button>
						</div>
					</Modal>
				) : null}
				{gallery_image.length >= 1 ? (
					<div className="gallery_images">
						{gallery_image.map((_image) => (
							<img src={_image.sizes.thumbnail.url} />
						))}
					</div>
				) : (
					<MediaPlaceholder
						multiple={true}
						onSelect={(media) => setGallery(media)}
						onFilesPreUpload={(media) =>
							setAttributes({
								gallery_image: media,
							})
						}
						onSelectURL={false}
						allowedTypes={["image"]}
						labels={{
							title: __("Add Image"),
						}}
					/>
				)}
			</div>
		</Fragment>
	);
}