Prev() Method Is Not Applying To The Previous Element

The prev().remove() is not removing the previous sibling of the element. There is a div with class crossSign after every li element, which is inside an a element. When the li is cl

Solution 1:

To improve the solution just add an extra parent "div" and use $(this).parent().remove() to remove the entire parent like this:

$('.crossSign').on('click', function() {
    $(this).parent().remove();
});

and create the parent on each group:

<div id="list-div">
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
  <div>
    <a href="https://www.example.com">
      <li class="links"><span>example</span></li>
    </a>
    <div class="crossSign">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>