在 wordpress 管理面板中删除图像

Question

我想将<a> 标记添加到<i>，当我按下图标时将删除图像。 这是此插件中 WP 库的代码：

<# 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>
<# } #>

我想删除它而不重新加载页面。我根本不知道该怎么做。

Answer 1

你可以用一点 JS/jQuery 来实现这一点，只需将 i 标签包装在带有特定类的 a 标签内：

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

并使用jQuery监听点击事件删除图片

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

确保$(this).closest('.thumbs') 中的thumbs 类是图像容器的正确类。