delete tags with button but not using plugin

Question

HTML

<div class="row p-5">
        <h4>
            <i class="fa-solid fa-tags"></i>
            Tags Input
        </h4>
        <div class="wrapper-tags">
            <div class="item-tag">
                <span class="tag">HTML
                    <button type="reset" class="btn-close-tags">
                        <i class="fa-solid fa-xmark"></i>
                    </button> 
                </span>
            </div>
            <input type="text" name="tags" class="form-control" id="tags-input" data-role="tagsinput" placeholder="Add Tags ...">
        </div>
    </div>

JS

I only deleted the original tags, the rest not working, somebody help me

$(document).ready(function(){

    /* ========================= Input Tags ========================= */
    $("#tags-input").keypress(function(event){
        var key = event.which;
        // console.log(key);
        
        if( key == 13 || key == 44){
            event.preventDefault();
            var tag = $(this).val();
            console.log(tag);
            if(tag.length > 0){
                $("<span class='tag'>"+ tag +"<button type='reset' class='btn-close-tags'><i class='fa-solid fa-xmark'></i></button></span>").insertBefore(this).fadeIn(100);
                $(this).val("");
            }
        }
    })

    /* ========================= Button Close Tags ========================= */
    $(".btn-close-tags").click(function(){
        $(this).parents("span").fadeOut(100);
    })
 });

Answer 1

As per checking your code what I found is you are trying to have a remove all tags button that removes all the tags (pre-added or dynamically-added), as well as have a remove tag button in front of all dynamically added tags which will remove that specific tag

a) Put remove all buttons outside from <span class="tag">

b) for dynamically added tags, on click of there remove button use event delegation.

c) For the remove all tags button add the jquery code too.

So do it like below:

$(document).ready(function() {
  $("#tags-input").keypress(function(event) {
    var key = event.which;
    if (key == 13 || key == 44) {
      event.preventDefault();
      var tag = $(this).val();
      console.log(tag);
      if (tag.length > 0) {
        $("<span class='tag'>" + tag + "<button type='reset' class='btn-close-tags'><i class='fa-solid fa-xmark'></i>Remove This current tag</button></span>").insertBefore(this).fadeIn(100);
        $(this).val("");
      }
    }
  })

  $(".btn-close-all-tags").click(function() {
    $("span.tag").fadeOut(100);
  })
  $(document).on('click', ".btn-close-tags", function() {
    $(this).parents("span").fadeOut(100);
  })
});

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

<div class="row p-5">
  <h4>
    <i class="fa-solid fa-tags"></i> Tags Input
  </h4>
  <div class="wrapper-tags">
    <div class="item-tag">
      <span class="tag">HTML</span>
      <button type="reset" class="btn-close-all-tags">
          <i class="fa-solid fa-xmark"></i>Remove All Tags
        </button>
    </div>
    <input type="text" name="tags" class="form-control" id="tags-input" data-role="tagsinput" placeholder="Add Tags ...">
  </div>
</div>