title: jquery getting an 'undefined' on the id of a div element I'm trying to grab
body: <p>So I am dynamically generating HTML code with JavaScript that loads in all my images from my Firebase Realtime Database. I'm currently working on implementing a button attached to each image that will delete this image when clicked. However, after multiple attempts to grab this div's ID attribute using both standard JavaScript and Jquery, the id in the alert box is always 'undefined'. Inspecting the webpage allows me to see that the image's id is always loaded in just fine, so I know it is there.</p>
  
  <p><a href="https://i.stack.imgur.com/e3sRN.png" rel="nofollow noreferrer">This is the HTML Generated that I'm trying to interact with.</a></p>
  
  <p>JavaScript function to respond to my html 'onclick event'</p>
  
  <pre><code>function deleteFile(){
  
  var postId = $(this).closest('div').attr('id');
  alert("You have selected id: " + postId);
  var sure = confirm("Are you sure you want to delete this post?");
   if(sure){
      firebase.database().ref().child('Posts/' + postId).remove().then(function(){
          alert("Post deleted sucessfully");
        });
      }
    };
  </code></pre>
  
  <p>Attached image is what html is generated on the actual chrome inspector. The ID's of course will all be unique.</p>