jQuery で親要素を取得することができません。

Question

下の画像のように ×ボタンをおしたら消えるようにしたいです。
×ボタンは spanタグで囲んであるので、spanの親の liとその子孫をまとめて消したいです。
そのためのコードとして、this.parent().remove() としたのですが、消えませんでした。
試験的に alert(this.parent().tagName) としたら何も表示されませんでした。
ちなみに alert(this.tagName) としたらうまくspan と表示されています。

  <ul class="tag-wrapper">
    <li class="tag-content">
      <span class="tag-label">タグ</span>
      <a><span class="text-icon">×</span></a>
      <input class="tag-hidden-field" value="タグ" type="hidden">
    </li>
  </ul>

$(function() {
  $(".tag-wrapper").on('click', ".text-icon",function(){
    alert(this.parent().tagName);
  });

Answer 1

「.text-icon」をクリックしたら直近の親liが削除されるのでしょうか？

$(function(){
  $('.tag-wrapper .text-icon').on('click',function(){
    $(this).closest('li').remove();
  });
});

Answer 2

$(this).parents('.tag-content').remove();

Comments

[bouyomisan]

ありがとうございます。
this は $(this) と囲むのですね。ありがとうございます。

Answer 3

  <ul class="tag-wrapper">
    <li class="tag-content">
      <span class="tag-label">タグ1</span>
      <span class="text-icon">×</span>
      <input class="tag-hidden-field" value="タグ1" type="hidden">
    </li>
    <li class="tag-content">
      <span class="tag-label">タグ2</span>
      <span class="text-icon">×</span>
      <input class="tag-hidden-field" value="タグ2" type="hidden">
    </li>
  </ul>

li要素が増えるとタグが増えるという認識でよろしいでしょうか。

上記の場合、「×」ボタンにaタグは不要だと思います。もしカーソルを変えたい場合は

.text-icon{corsor:pointer;}

としていただき、jQueryの方は

$('.tag-wrapper .text-icon').on('click', function(){
   $(this).parent().remove();
});

検証していませんが、上記でいけるんじゃないでしょうか。

Answer 4

$(this).parent().remove();
もしくは
this.parentElement.remove();
```です。