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

Code for the remove_image function

function remove_image(img)
{
    if(confirm(''))
    {
        //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();
    }
}

T.J. Crowder · Accepted Answer

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

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:

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

removing div in javascript

Answers (1)

Related Questions