Удаление после добавления не удаляет

Question

У меня есть забавный фрагмент кода, который, похоже, не хочет меня слушать. По сути, я пытаюсь повлиять, когда на карте появляются несколько кнопок масштабирования, в зависимости от того, какая карта будет использоваться.

Хотя начало работы с кнопками масштабирования, которые не были добавлены, работает должным образом, а позднее добавление кнопок масштабирования при переходе на карту, на которой они используются, также происходит без протеста, я не могу на всю жизнь удалить кнопки, когда они был добавлен.

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

Если карта, которую я впервые ввел, не имеет кнопок масштабирования (map_noZoom.jpg), то кнопки масштабирования отсутствуют. Во время игры я переключаю области с другой картой, и появляются кнопки зума. Если я вернусь в область карты map_noZoom.jpg, кнопки не будут удалены. Я пробовал три разных способа, показанных выше, чтобы удалить кнопки, но ничего не происходит.

Есть ли другой способ удалить () (здесь нет более чистого решения, просто способ получить эту работу!) Или я что-то не так делаю?

Answer 1

Вы не понимаете, что делает селектор, переданный .remove([selector]). Он не соответствует дочерним элементам вызываемого вами элемента, но вместо этого действует как фильтр для выбранных элементов, для которых он вызывается, поэтому $MapContainer.remove("#mapZoomIn"); удаляет все элементы $MapContainer с идентификатором mapZoomIn;

Что вам нужно сделать, это сначала найти элемент, а затем удалить его:

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

Answer 2

Вы должны find определенные элементы и удалить их следующим образом:

// find .mapZoomInButton inside $MapContainer and remove those elements
$MapContainer.find(".mapZoomInButton").remove();

.remove с помощью селектора фильтрует текущий набор (т. Е. $MapContainer), а это не то, что вам нужно.

Answer 3

$MapContainer.find(".MapZoomInButton").remove();

или, проще:

$(".MapZoomInButton").remove();