Question

I’ve got a funny bit of code which doesn’t seem to want to listen to me. Essentially, I’m trying to affect when some zoom buttons appear on a map depending on which map is going to be used.

While starting with the zoom buttons not being appended works as it should, and later adding the zoom buttons when changing to a map that uses them also happens without protest, I cannot for the life of me remove the buttons once they’ve been appended.

JS:

Map = function()
{

   var $MapContainer;

   this.initMap = function($container)
   {
      $MapContainer = $container;
   }

   this.setZoomButtons = function(mapImage)
   {
      if(mapImage != "map_noZoom.jpg")
      {
         $MapContainer.append("<div id='mapZoomIn' class='MapZoomInButton' OnClick='Star.Bus.fire(\"zoomIn\",1)'>+</div>");
         $MapContainer.append("<div id='mapZoomOut' class='MapZoomOutButton' OnClick='Star.Bus.fire(\"zoomOut\",-1)'>-</div>");
      }
      else
      {
         // I've tried all 3 ways below to have the zoom buttons removed - none successful
         // Only showing the zoom in button for the example
         $MapContainer.remove("#mapZoomIn");
         $MapContainer.remove(".MapZoomInButton");
         $MapContainer.remove("<div id='mapZoomIn' class='MapZoomInButton' OnClick='Star.Bus.fire(\"zoomIn\",1)'>+</div>");
      }
   }
}

If the map I first enter is the one that does not have the zoom buttons (map_noZoom.jpg), then the zoom buttons are not present. I switch areas with a different map while in game, and the zoom buttons appear. If I go back to map_noZoom.jpg map’s area, the buttons are not removed. I’ve tried the three different ways seen above to remove the buttons, but nothing is happening.

Is there another way to remove() (not looking for a cleaner solution here, just a way to have this work!) or am I doing something wrong?

Answer 1

You are confused about what the selector passed to .remove([selector]) does. It doesn’t match to children of the element you call it on, but instead acts as a filter on those selected elements you call it on, so $MapContainer.remove("#mapZoomIn"); removes all $MapContainer elements with an id of mapZoomIn;

What you would need to do is find the element first, then remove it:

$MapContainer.find('#mapZoomIn').remove();