Question

In a script I had the following:

$('#image-slider').empty();

Which emptied the image slider element in my application.

I wanted to move from directly using ID references in my function so I declared some variables at the top of the script including:

var globals = [];
globals.markup = [];
globals.values = [];
globals.markup.image_slider = $('#image_slider');

However when I now call:

globals.markup.image_slider.empty();

The slider is NOT emptied.

Any ideas what I’m doing wrong?

Edit:

A full example:

$(document).ready(function(){
  var projects = <?= $json; ?>;
  var globals = [];
  globals.markup = [];
  globals.values = [];

  globals.markup.title = $('#title');
  globals.markup.image_slider = $('#image_slider');


  function load_project(f)
  {
      var potential = window.location.hash.substring(1);

      $.each(projects, function(i, project){

          if (project.permalink == potential)
          {
              // Manage stats and fields
              $('#title').text(project.title);
              $('#agency').text(project.agency);
              $('#description').text(project.description);
              $('#website_url').attr('href', project.website_url);

              // Manage images
              globals.markup.image_slider.empty();
    .....

Edit: I was an idiot. It was a simple typo.
image_slider should have been image-slider .. my bad.

Answer 1

As @davin correctly suggested, the code is fine, the problem is elsewhere. I had accidentally typed image_slider rather than image-slider as the div is id-ed in the markup.