title: Uncaught TypeError: Cannot read property 'remove' of null
body: <p>Full error:</p>
  
  <pre><code>scenes.js:131 
  
  Uncaught TypeError: Cannot read property 'remove' of null
      at HTMLInputElement.afterTextInserted (scenes.js:131)
      at HTMLInputElement.dispatch (jquery-1.11.0.min.js:3)
      at HTMLInputElement.r.handle (jquery-1.11.0.min.js:3)
      at Object.trigger (jquery-1.11.0.min.js:3)
      at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2)
      at HTMLInputElement.&lt;anonymous&gt; (jquery-1.11.0.min.js:3)
      at Function.each (jquery-1.11.0.min.js:2)
      at e.fn.init.each (jquery-1.11.0.min.js:2)
      at e.fn.init.trigger (jquery-1.11.0.min.js:3)
      at selectCurrent (jquery.autocomplete.js:219)
      at HTMLUListElement.&lt;anonymous&gt; (jquery.autocomplete.js:581)
      at HTMLUListElement.dispatch (jquery-1.11.0.min.js:3)
      at HTMLUListElement.r.handle (jquery-1.11.0.min.js:3)
  </code></pre>
  
  <p>I'm working with thirty bees (a fork of PrestaShop) and I'm trying to add an image mapper. (A feature that once you hover over a part of an image you get redirected to a different product).</p>
  
  <p>But when I'm trying to save the image mapper, nothing happens. And I get this error in the console. What does this error mean and how can I fix it?</p>
  
  <p>Thanks!</p>
  
  <p>Edit: found the code. Here's the code at line 131:</p>
  
  <pre><code>function afterTextInserted(event, data, formatted) {
    if (typeof data === 'undefined') {
      return false;
    }
  
    // If the element exist, then the user confirm the editing
    // The variable need to be reinitialized to null for the next
    if (typeof window.lastEditedItem !== 'undefined') {
      window.lastEditedItem.remove(); //line 131
    }
    window.lastEditedItem = null;
  
    window.zoneCurrent += 1;
    var idProduct = data[1];
    var nameProduct = data[0];
    var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
    var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
    var width = window.selectionCurrent.width;
    var height = window.selectionCurrent.height;
  
    addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
  }
  </code></pre>
  
  <p>Here is all the code:</p>
  
  <pre><code>zoneCurrent = 0;
  selectionCurrent = null;
  valueOfZoneEdited = null;
  
  // Last item is used to save the current zone and
  // allow to replace it if user cancel the editing
  lastEditedItem = null;
  
  /* functions called by cropping events */
  
  function showZone() {
    $('#large_scene_image').imgAreaSelect({ show: true });
  }
  
  function hideAutocompleteBox() {
    $('#ajax_choose_product')
      .fadeOut('fast')
      .find('#product_autocomplete_input').val('');
  }
  
  function onSelectEnd(img, selection) {
    selectionCurrent = selection;
    showAutocompleteBox(selection.x1, selection.y1 + selection.height);
  }
  
  function undoEdit() {
    hideAutocompleteBox();
    $('#large_scene_image').imgAreaSelect({ hide: true });
    $(document).unbind('keydown');
  }
  
  /*
   ** Pointer function do handle event by key released
   */
  function handlePressedKey(keyNumber, fct) {
    // KeyDown isn't handled correctly in editing mode
    $(document).keyup(function (event) {
      if (event.keyCode === keyNumber) {
        fct();
      }
    });
  }
  
  function showAutocompleteBox(x1, y1) {
    $('#ajax_choose_product:hidden')
      .slideDown('fast');
    $('#product_autocomplete_input').focus();
    handlePressedKey('27', undoEdit);
  }
  
  function editThisZone(aInFixedZoneElement) {
    var $fixedZoneElement = $(aInFixedZoneElement).parent();
    var x1 = $fixedZoneElement.css('margin-left');
    x1 = x1.substring(0, x1.indexOf('px'));
    x1 = parseInt(x1, 10) - parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10);
    var y1 = $fixedZoneElement.css('margin-top');
    y1 = y1.substring(0, y1.indexOf('px'));
    y1 = parseInt(y1, 10) - parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10);
    var width = $fixedZoneElement.css('width');
    width = width.substring(0, width.indexOf('px'));
    var x2 = x1 + parseInt(width, 10);
    var height = $fixedZoneElement.css('height');
    height = height.substring(0, height.indexOf('px'));
    var y2 = y1 + parseInt(height, 10);
  
    window.valueOfZoneEdited = $fixedZoneElement.find('a').attr('rel');
  
    window.selectionCurrent = [];
    window.selectionCurrent['x1'] = x1;
    window.selectionCurrent['y1'] = y1;
    window.selectionCurrent['width'] = width;
    window.selectionCurrent['height'] = height;
  
    // Save the last zone
    window.lastEditedItem = $fixedZoneElement;
  
    $('#product_autocomplete_input').val($fixedZoneElement.find('p').text());
    showAutocompleteBox(x1, y1 + parseInt(height, 10));
    $('#large_scene_image').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2 });
  }
  
  /* function called by cropping process (buttons clicks) */
  
  function deleteProduct(indexZone) {
    $('#visual_zone_' + indexZone).fadeOut('fast', function () {
      $(this).remove();
    });
    return false;
  }
  
  function afterTextInserted(event, data, formatted) {
    if (typeof data === 'undefined') {
      return false;
    }
  
    // If the element exist, then the user confirm the editing
    // The variable need to be reinitialized to null for the next
    if (typeof window.lastEditedItem !== 'undefined') {
      window.lastEditedItem.remove();
    }
    window.lastEditedItem = null;
  
    window.zoneCurrent += 1;
    var idProduct = data[1];
    var nameProduct = data[0];
    var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
    var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
    var width = window.selectionCurrent.width;
    var height = window.selectionCurrent.height;
  
    addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
  }
  
  function addProduct(zoneIndex, x1, y1, width, height, idProduct, nameProduct) {
    $('#large_scene_image')
      .imgAreaSelect({ hide: true })
      .before('\
              &lt;div class="fixed_zone" id="visual_zone_' + zoneIndex + '" style="color:black;overflow:hidden;margin-left:' + x1 + 'px; margin-top:' + y1 + 'px; width:' + width + 'px; height :' + height + 'px; background-color:white;border:1px solid black; position:absolute;" title="' + nameProduct + '"&gt;\
                  &lt;input type="hidden" name="zones[' + zoneIndex + '][x1]" value="' + (x1 - parseInt($('#large_scene_image').css('margin-left').replace('px', ''))) + '"/&gt;\
                  &lt;input type="hidden" name="zones[' + zoneIndex + '][y1]" value="' + (y1 - parseInt($('#large_scene_image').css('margin-top').replace('px', ''))) + '"/&gt;\
                  &lt;input type="hidden" name="zones[' + zoneIndex + '][width]" value="' + width + '"/&gt;\
                  &lt;input type="hidden" name="zones[' + zoneIndex + '][height]" value="' + height + '"/&gt;\
                  &lt;input type="hidden" name="zones[' + zoneIndex + '][id_product]" value="' + idProduct + '"/&gt;\
                  &lt;p style="position:absolute;text-align:center;width:100%;" id="p_zone_' + zoneIndex + '"&gt;' + nameProduct + '&lt;/p&gt;\
                  &lt;a style="margin-left:' + (parseInt(width) / 2 - 16) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{deleteProduct(' + zoneIndex + '); return false;}"&gt;\
                      &lt;img src="../img/admin/delete.gif" alt="" /&gt;\
                  &lt;/a&gt;\
                  &lt;a style="margin-left:' + (parseInt(width) / 2) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{editThisZone(this); return false;}"&gt;\
                      &lt;img src="../img/admin/edit.gif" alt=""/&gt;\
                  &lt;/a&gt;\
              &lt;/div&gt;\
          ');
    $('.fixed_zone').css('opacity', '0.8');
    $('#save_scene').fadeIn('slow');
    $('#ajax_choose_product:visible')
      .fadeOut('slow')
      .find('#product_autocomplete_input').val('');
  }
  
  $(window).load(function () {
    /* function autocomplete */
    $('#product_autocomplete_input')
      .autocomplete('ajax_products_list.php', {
        minChars: 1,
        autoFill: true,
        max: 20,
        matchContains: true,
        mustMatch: true,
        scroll: false
      })
      .result(afterTextInserted);
  
    $('#large_scene_image').imgAreaSelect({
      borderWidth: 1,
      onSelectEnd: onSelectEnd,
      onSelectStart: showZone,
      onSelectChange: hideAutocompleteBox,
      minHeight: 30,
      minWidth: 30
    });
  
    /* load existing products zone */
    for (var i = 0; i &lt; window.startingData.length; i += 1) {
      addProduct(i, window.startingData[i][2] + parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10),
        window.startingData[i][3] + parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10),
        window.startingData[i][4], window.startingData[i][5], window.startingData[i][1], window.startingData[i][0]);
    }
    window.zoneCurrent = window.startingData.length;
  
    if (window.startingData.length) {
      $('#save_scene').show();
    }
  });
  </code></pre>