title: how can I fix the error: this.parentNode is null?
body: <p>I'm developing an app where you can display all monuments and places to be in Ghent (Belgium). There's a fullscreen map on the homepage (programmed in jQuery with Google Maps API v3) and on the lefthand side, there's a list of the items that you can display. Users can choose whether they want the category to be displayed alone, or to be added to the categories that they clicked before.</p>
  
  <p>This is what happens: I load the page, I click a category. Everything works fine. But only if I click spans in the same category. Whenever I click something in another category, firebug throws the error: parent is null (or this.parentNode is null)</p>
  
  <p>I initially tried to do it in jQuery with $(this).parent().html()..., but it gives me a similar error: 'TypeError: parent.html(...) is undefined'.</p>
  
  <p>Here's my code...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="category transport"&gt;
       &lt;h1&gt;Transport&lt;/h1&gt;
       &lt;ul class="clearfix"&gt;
            &lt;li&gt;&lt;span class="category_li"&gt;Parkings&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span class="category_li"&gt;Stations&lt;/span&gt;&lt;/li&gt;
       &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>JQUERY (HOVER EFFECT)</strong>
  this is where I add the 'add_on_map' span to the list-items</p>
  
  <pre><code>$('.category ul li').hover(
          //mouse-enter
          function()
          {
              if($(this).children('.add_on_map').length == 0)
              {
                  $(this).append(add_marker_sign);
                  $('.add_on_map').click(showCategory);
              }
              else
              {
                  $(this).children('.add_on_map').show();
              }
          }, 
          //mouse-leave
          function()
          {
              $(this).children('.add_on_map').hide();
          }
      );
  </code></pre>
  
  <p><strong>JQUERY (CLICK EVENT)</strong></p>
  
  <pre><code>function showCategory(e)
  {
  var parent = null;
  parent = this.parentNode;
  
  var add_marker_sign = '&lt;span class="add_on_map plus"&gt; +&lt;/span&gt;';
  var remove_marker_sign = '&lt;span class="add_on_map minus"&gt; -&lt;/span&gt;';
  
  var element;
  var to_removed_marker_sign = parent.innerHTML.replace(add_marker_sign, remove_marker_sign);
  var to_add_marker_sign = parent.innerHTML.replace(remove_marker_sign, add_marker_sign);
  
     //User clicks span -&gt; If you click on the word:
     //                    All markers are deleted and the clicked category is added
     //So when the clicked item doesn't have the 'add_on_map' class:
     if(!$(this).hasClass('add_on_map')){
      console.log('remove all markers and add new');
      removeAllMarkers();
      element = $(this).text().toLowerCase();
      $(this).parent().html(to_removed_marker_sign);
      $('.category ul li').removeClass('active_subcategory');
      addMarkers(element);
      $('.category ul li span').click(showCategory);
     }
     //When clicked item DOES have 'add_on_map' class:
     else
     {
      element = $(this).parent().children('.category_li').text().toLowerCase();
      //Check if markers should be ADDED or DELETED
      if($(this).hasClass('plus')) {
          console.log('add markers');
          $(this).parent().html(to_removed_marker_sign);
          addMarkers(element);
          $('.category ul li span').click(showCategory);
      }
      if($(this).hasClass('minus')) {
          console.log('remove markers');
          $(this).parent().html(to_add_marker_sign);
          removeMarkers(element);
          $('.category ul li span').click(showCategory);
      }
     }
   }
  </code></pre>
  
  <p>I made a small live <a href="http://jsfiddle.net/98gmn/2" rel="nofollow">demo</a> on jsfiddle! </p>
  
  <p>If anyone can help me with this, I'd be greatful!
  Thanks in advance. </p>
  
  <p>Helena S.</p>