タグ機能を実装しています

Question

自作でタグ機能のついた入力欄を実装しています。
teratail のようにエンターキーを押すと色つきでタグっぽく表示させることはできたのですが、 ×ボタンを押すと消えるようにしたいのですがうまくいきません。
this.parentUntil("li").remove();
というようにしたのですが、どうも消えません。
this.remove();
と実験的に×ボタンだけ消そうとしたら一番目のタグの×ボタンだけ消えて、2個目以降はボタンをおしても消えません。

ボタンを押したタグをうまく消すにはどのようにしたらいいのでしょうか？

<div class="wrapper">
  <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>
    <li>
      <input id="tag-input" class="tag-input ui-autocomplete-input" placeholder="Press Enter or Space" autocomplete="off" type="text"> 
    </li>
  </ul>
</div>





<script>
$(function() {
  $("#tag-input").focus(function(){
    $(this).css("background","#b3eaef");
  }).blur(function(){
    $(this).css("background","#fff");
  });
  
  function add_tag (text) {
    var $tag_li =   "<li class='tag-content'>"
                  +   "<span class='tag-label'> " + text + "</span>"
                  +   "<a><span class='text-icon'>×</span></a>"
                  +   "<input class='tag-hidden-field' value='" + text + "' type='hidden'>"
                  + "</li>"
    return $tag_li              
  }
  
  $("#tag-input").on("keydown", function(e){
    if(e.keyCode == 13){
      var $text = this.value
      this.value = ""
      $("#tag-input").before(add_tag($text))
    }
  });
  
  $(".text-icon").click(function(){
    this.remove();
  });   
});
</script>

Answer 1

 $(".text-icon").click(function(){
    this.remove();
 });   

を

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

に変更したらいかがでしょうか？

Comments

[bouyomisan]

おお、できました！
どうして僕の場合だと失敗したのでしょうか？
もしよければお教えください。

[mirainonakamura]

追加した要素に対しても実行したい click イベントの文

$("#click").on("click",".box",function(){
//クリック時に実行する内容
});

$(先祖セレクタ).on("click","対象セレクタ",function(){
});

http://9-bb.com/jquery-click/

こちらに上手くまとまっておりました。

[bouyomisan]

あとから追加したから駄目だったのですね！
こんなの知りませんでした。ありがとうございますm(__)m