CODEWITHSUNDEEP
phpwordpressimagehyperlink
Regular User
Regular User

Reputation: 511

remove image in wordpress admin panel

I want to add <a> tag to <i> that will remove an image when I press on the icon. Here is a code to WP gallery in this plugin:

<# if ( data.values[0] ) { #>
    <div class="main_image">
        <div class="main_image_droppable">
            <div class="inner">
                <div class="inner-bordered">
                    <i class="fa fa-file-image-o"></i>
                </div>
                <span>{{ data.l10n.drop }}</span>
            </div>
        </div>
        <img src="{{data.values[0].src}}" />
    </div>
    <div class="stm_mini_thumbs">
        <# _.each( data.values, function( img, id) { #>
            <div class="thumbs">
                <div class="inner">
                    <img src="{{img.thumb}}" />
                    <div class="inner-hover">
                  /* <a> tag should be here */      <i class="fa fa-remove" data-delete="{{id}}"></i>
                        <i class="fa fa-arrows"></i>
                    </div>
                </div>
            </div>
        <# } ) #>
    </div>
<# } else { #>
    <div class="butterbean-placeholder">{{ data.l10n.placeholder }}</div>
<# } #>

I want to delete it without reloading the page. I don't know how to do this at all.

Upvotes: 1

Views: 248

Answers (1)

Ali_k
Ali_k

Reputation: 1661

You can achieve this with a little of JS/jQuery, just wrap the i tag inside an a tag with specific class:

<a href="#" class="image-remove-btn"><i class="fa fa-remove" data-delete="{{id}}"></i></a>

And use jQuery to listen to click event to remove the image

jQuery(document).ready(function($) {
    $(document).on('click', '.image-remove-btn', function (e) {
        $(this).closest('.thumbs').remove();
    });
});

Make sure the thumbs class in $(this).closest('.thumbs') is the correct class for the image container.

Upvotes: 1

Related Questions