removing div in javascript

Question

I have a template that will be appended to the html page. It consists of a dynamic div id and a delete button is inside it.

Structure of the div id -> gc_photo_{{id}}_{{filename}}, something like gc_photo_1234_sgh13232dff.jpg

I wrote a function called remove_image to get the {{id}} and {{filename}} of the clicked delete button. Those information is used to form the id of the div to remove.

However, the div is not removed. How can I go about doing it?

Code for the template

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

Code for the remove_image function

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();
    }
}

The problem is the dot in the file name (.jpg). Read here on how to escape it: http://stackoverflow.com/questions/9930577/jquery-dot-in-id-selector — Jodi Supporter, Jan 21 '16 at 07:05

T.J. Crowder · Accepted Answer · 2016-01-21T07:07:19.647

The problem is that your id value isn't valid for a simple CSS ID selector (it's a valid HTML id, but HTML and CSS have different rules).

While you could use $('[id="gc_photo_' + fullpath + '"]').remove(); (note there's no# at the beginning) to remove it, you don't need to. You don't need the id at all, just remove the containing .row.gc_photo div:

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

Live Example:

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>

Side note: You could remove the onclick=return remove_image($(this));" attribute in favor of hooking things up dynamically. All of these are in some kind of container (at worst document.body, but probably there's a closer, stable container). You can hook them up with event delegation (so you don't have to worry about it when you add more at runtime). Give the buttons a class:

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

...then:

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

Live Example:

$(".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>

removing div in javascript

1 Answers1