Question

I have an image upload script that creates a hidden div tag when an image is uploaded and should remove the image tag if somebody deletes the photo.

When somebody uploads it, it creates a tag like this:

<input type="hidden" id="hidden_image_1903180_620338339358jpg" 
name="ad_image[]" value="image_1903180_620338339358.jpg">

The photo can be deleted with:

<a onclick="delete_media('image_1903180_620338339358jpg', 1, 1903180);">
Delete Photo</a>

The problem is what when somebody clicks delete, it doesn't remove the entire tag, it only removes the value like this:

<input type="hidden" id="hidden_image_1903180_620338339358jpg" 
name="ad_image[]" value="">

How can I make it so the entire <div> ... </div> is removed?

The delete_media function is like this:

function delete_media_async(box_id, media_type, id) {

   var file_name = document.getElementById('hidden_' + box_id).value;

   var xmlHttp = GetXmlHttpObject();

   if (xmlHttp == null) {
      alert("Browser does not support HTTP Request");
      return;
   }

   var url = relative_path + 'file.php';
   var action = url + '?do=remove&file_name=' + file_name + '&id=' + id;

   xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
         var response = xmlHttp.responseText;

         document.getElementById('box_' + box_id).innerHTML = '';
         document.getElementById('box_' + box_id).className = 'thumbnail_display_empty';
         document.getElementById('hidden_' + box_id).value = '';

         var nb_uploads = document.getElementById('nb_uploads_' + media_type).value;
         nb_uploads--;

         document.getElementById('nb_uploads_' + media_type).value = nb_uploads;

         document.getElementById('btn_upload_' + media_type).disabled = false;
         document.getElementById('item_file_upload_' + media_type).disabled = false;
         document.getElementById('item_file_url_' + media_type).disabled = false;
         document.getElementById('item_file_embed_' + media_type).disabled = false;
      }
   };

   xmlHttp.open("GET", action, true);
   xmlHttp.send(null);

}

Answer 1

$('#hidden_' + box_id).remove() will remove the input field. If the input field is enclosed in a div and you want to remove that:

$('#hidden_' + box_id).parent().remove()

Edit: this is using jQuery

Answer 2

Assuming that your hidden input has a div as its parent, you could remove that div using this:

var hidden_input = document.getElementById('hidden_' + box_id);
var parent_div = hidden_input.parentNode;
var parent_of__parent_div = parent_div.parentNode;

// now remove the parent div:
parent_of__parent_div.removeChild( parent_div );

Insert that in your function and it should remove your entire div.

I used only pure Javascript, since your code was the same way.

jquery remove entire div tag

2 个答案: