title: prev() method is not applying to the previous element
body: <p>The <code>prev().remove()</code> is not removing the previous sibling of the element.</p>
  <p>There is a div with class <code>crossSign</code> after every <code>li</code> element, which is inside an a element. When the <code>li</code> is clicked, I want to remove its previous element and itself.</p>
  <p>It's not happening. Can someone tell me another what is wrong or any other technique to do this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$newform.on('submit', function(e) {
    e.preventDefault();
    var text = $newform.find('input:text').val();
    var url = document.getElementById('addurl').value;
    $list.append('&lt;a href="' + url + '"&gt;&lt;li class="links"&gt;&lt;span&gt;' + text + '&lt;/span&gt;&lt;/li&gt;&lt;/a&gt;&lt;div class="crossSign"&gt;&lt;div class="line1"&gt;&lt;/div&gt;&lt;div class="line2"&gt;&lt;/div&gt;&lt;/div&gt;');
    //$list.append('&lt;div class="crossSign"&gt;&lt;div class="line1"&gt;&lt;/div&gt;&lt;div class="line2"&gt;&lt;/div&gt;&lt;/div&gt;');
    //$('a').attr('href', url);
    $newform.find('input:text').val('');
    $addurl.val('');
  });
  
  $('#close-form').on('click', function() {
    $newform.hide();
    $newlinks.show();
  });
  
  $('.crossSign').on('click', function() {
    $(this).prev().remove();
    $(this).remove();
  });
  
  $('.crossSign').on('mouseover', function() {
    $(this).show();
  });
  
  $('.crossSign').on('mouseout', function() {
    $(this).hide();
  });
  
  $('a').on('mouseover', function() {
    $(this).next().show();
  });
  
  $('a').on('mouseout', function() {
    $(this).next().hide();
  });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="list-div"&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="https://www.example.com"&gt;
      &lt;li class="links"&gt;&lt;span&gt;example&lt;/span&gt;&lt;/li&gt;
    &lt;/a&gt;
    &lt;div class="crossSign"&gt;
      &lt;div class="line1"&gt;&lt;/div&gt;
      &lt;div class="line2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>