Question

我有一个将附加到html页面的模板。它由一个动态div id和一个删除按钮组成。

div id的结构 - ＆gt; gc_photo_{{id}}_{{filename}}，类似于gc_photo_1234_sgh13232dff.jpg

我写了一个名为remove_image的函数来获取点击删除按钮的{{id}}和{{filename}}。这些信息用于形成要删除的div的id。

但是，div不会被删除。我该怎么做呢？

模板代码

<script type="text/template" id="imageTemplate">
    <div class="row gc_photo" id="gc_photo_{{id}}_{{filename}}" 
    data-file="{{filename}}" data-image="<?php echo $biz_product->image_name;?>"
    style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">

<div class="col-md-4">
                    <div class="form-group">
                        <input name="images_alt[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
                    </div>
                </div>
         <div class="col-md-4">
             <a onclick="return remove_image($(this));" rel="{{id}}_{{filename}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
         </div>
    </div>
</script>

remove_image函数的代码

function remove_image(img)
{
    if(confirm('<?php echo lang('confirm_remove_image');?>'))
    {
        //Get the rel value of the image's delete icon -> {{id}}_{{filename}}
        var fullpath  = img.attr('rel');
        var splitpath = fullpath.split("_");
        var id = splitpath[0];
        var filename = splitpath[1];

        $('#gc_photo_'+fullpath).remove();
    }
}

Answer 1

问题是您的id值对于简单的CSS ID选择器无效（它是有效的HTML id，但HTML和CSS有不同的规则）。

虽然你可以使用$('[id="gc_photo_' + fullpath + '"]').remove();（注意开头没有#）来删除它，但你不需要。您根本不需要id，只需删除包含.row.gc_photo div：

function remove_image(img) {
    if (confirm(/*...*/)) {
        img.closest(".row.gc_photo").remove();
    }
}

直播示例：

function remove_image(img) {
  if (confirm("Delete the image?")) {
    img.closest(".row.gc_photo").remove();
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<div class="row gc_photo" id="gc_photo_546_some_file_name.jpg" data-file="some_file_name.jpg" data-image="some product name" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">

    <div class="col-md-4">
        <div class="form-group">
            <input name="images_alt[546][alt]" value="the alt text" class="form-control" placeholder="some placeholder" />
        </div>
    </div>
    <div class="col-md-4">
        <a onclick="return remove_image($(this));" rel="546_some_file_name.jpg" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
    </div>
</div>
<div class="row gc_photo" id="gc_photo_889_another_file.png" data-file="another_file.png" data-image="another image" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">

    <div class="col-md-4">
        <div class="form-group">
            <input name="images_alt[889][alt]" value="another alt" class="form-control" placeholder="another placeholder" />
        </div>
    </div>
    <div class="col-md-4">
        <a onclick="return remove_image($(this));" rel="889_another_file.png" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：您可以删除onclick=return remove_image($(this));"属性，以支持动态挂钩。所有这些都在某种容器中（最坏的document.body，但可能是一个更接近，稳定的容器）。您可以使用事件委派将它们连接起来（因此在运行时添加更多内容时不必担心它）。给按钮一个类：

<a rel="546_some_file_name.jpg" class="delete-image btn btn-danger pull-right"><i class="icon-times "></i></a>

...然后：

$("selector-for-the-container").on("click", ".delete-image", function() {
    if (confirm(/*...*/)) {
        $(this).closest(".row.gc_photo").remove();
    }
    return false;
});

直播示例：

$(".some-container").on("click", ".delete-image", function() {
  if (confirm("Delete the image?")) {
    $(this).closest(".row.gc_photo").remove();
  }
  return false;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="some-container">
  <div class="row gc_photo" id="gc_photo_546_some_file_name.jpg" data-file="some_file_name.jpg" data-image="some product name" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">

    <div class="col-md-4">
      <div class="form-group">
        <input name="images_alt[546][alt]" value="the alt text" class="form-control" placeholder="some placeholder" />
      </div>
    </div>
    <div class="col-md-4">
      <a rel="546_some_file_name.jpg" class="delete-image btn btn-danger pull-right"><i class="icon-times "></i></a>
    </div>
  </div>
  <div class="row gc_photo" id="gc_photo_889_another_file.png" data-file="another_file.png" data-image="another image" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">

    <div class="col-md-4">
      <div class="form-group">
        <input name="images_alt[889][alt]" value="another alt" class="form-control" placeholder="another placeholder" />
      </div>
    </div>
    <div class="col-md-4">
      <a rel="889_another_file.png" class="delete-image btn btn-danger pull-right"><i class="icon-times "></i></a>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在javascript中删除div

1 个答案: