[javascript] How to delete parent element using jQuery

I have some list item tags in my jsp. Each list item has some elements inside, including a link ("a" tag) called delete. All that I want is to delete the entire list item when I click the link.

Here is the structure of my code:

$("a").click(function(event) {_x000D_
  event.preventDefault();_x000D_
  $(this).parent('.li').remove();_x000D_
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<li id="191" class="li">_x000D_
  <div class="text">Some text</div>_x000D_
  <h4><a href="URL">Text</a></h4>_x000D_
  <div class="details">_x000D_
    <img src="URL_image.jpg">_x000D_
    <span class="author">Some info</span>_x000D_
    <div class="info"> Text_x000D_
      <div class="msg-modification" display="inline" align="right">_x000D_
        <a name="delete" id="191" href="#">Delete</a>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</li>

But this doesn't work. I'm new at jQuery, so I tried some things, like for example:

$(this).remove();

This works, it deletes the link when clicked.

$("#221").remove();

This works, it deletes the indicated list item, but it's not "dynamic".

Can someone give me a tip?

I have stumbled upon this problem for one hour. After an hour, I tried debugging and this helped:

$('.list').on('click', 'span', (e) => {
  $(e.target).parent().remove();
});

HTML:

<ul class="list">
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
</ul>

You could also use this:

$(this)[0].parentNode.remove();

Use parents() instead of parent():

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});

what about using unwrap()

<div class="parent">
<p class="child">
</p>
</div>

after using - $(".child").unwrap() - it will be;

<p class="child">
</p>

Delete parent:

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

Delete all parents:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});

$('#' + catId).parent().remove('.subcatBtns');