Question

我有一个文本输入，当您编写文本并按Enter键时，将清除文本输入，并在下面添加该文本，并带有一个锚点链接作为标签。我想当我单击关闭链接时，该标签被删除。删除评论的代码是代码。

var itemsArray = [];
        $("#Label").on("keydown", function(e) {
            var contentHtml = "";
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) { //Enter keycode
                itemsArray.push($("#Label").val());
                for (let i = 0; i < itemsArray.length; i++) {
                    if (itemsArray[i] != '') {
                        contentHtml += '<div class="dib w-auto m-1 p-0"><div class="d-flex bg-dark text-secondary p-1 rounded"><span class="h-half mb-1">' + itemsArray[i] + '</span> <a href="javascript:void(0)" class="remover badge badge-dark mt-1 ml-2 mb-1 rounded-circle">×</a></div></div>';
                    }
                }
                $("#labels-box").html(contentHtml);
                $("#Label").val('');
            }
        });
        /// i want to remove labels with this code
        const items = document.querySelectorAll('a.remover');
        items.forEach(itm => itm.addEventListener('click', function() {
            console.log(itm);
        }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="pt-4">Add New Anime</h3>
<hr>
<form name="articleForm">
<div class="row m-0 p-0">
    <div class="col-md-8 mt-0 mb-0 mx-auto p-2">
        <div class="form-group">
            <label class="control-label">Photo</label>
            <input type="file" id="files" name="files" single accept="image/jpeg, image/png, image/gif, image/jpg" />
        </div>
    </div>
    <div class="col-md-8 mt-0 mb-0 mx-auto p-2">
        <div class="form-group m-0">
            <label class="control-label">Title</label>
            <input type="text" class="form-control" name="title">
        </div>
    </div>
    <div class="col-md-8 mt-0 mb-0 mx-auto p-2">
        <div class="form-group m-0">
            <label class="control-label">Summery</label>
            <textarea class="form-control" name="summery" id="summery" cols="30" rows="7"></textarea>
        </div>
    </div>
    <div class="col-md-8 mt-0 mb-0 mx-auto p-2">
        <div class="form-group m-0">
            <label class="control-label">Label</label>
            <input type="text" class="form-control" name="Label" id="Label" />
            <div class="dib w-100 pt-2 pb-3 m-0" id="labels-box">
            </div>
        </div>
    </div>
    <div class="col-md-8 mt-0 mb-0 mx-auto p-2">
        <div class="form-group text-center m-0">
            <input type="submit" value="Save" class="btn btn-info pr-5 pl-5">
        </div>
    </div>
</div>
</form>

Answer 1

您可以在keydown事件内移动删除逻辑，请考虑以下因素（我也添加了jquery实现）：

var itemsArray = [];
$("#Label").on("keydown", function(e) {
  var contentHtml = "";
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) { //Enter keycode
    itemsArray.push($("#Label").val());
    for (let i = 0; i < itemsArray.length; i++) {
      if (itemsArray[i] != '') {
        contentHtml += '<div class="dib w-auto m-1 p-0"><div class="d-flex bg-dark text-secondary p-1 rounded"><span class="h-half mb-1">' + itemsArray[i] + '</span> <a href="javascript:void(0)" class="remover badge badge-dark mt-1 ml-2 mb-1 rounded-circle">×</a></div></div>';
      }
    }
    $("#labels-box").html(contentHtml);
    $("#Label").val('');
    /*
    const items = document.querySelectorAll('a.remover');
    items.forEach(itm => itm.addEventListener('click', function() {
      //console.log(itm);
      $(itm).closest("div.dib").remove()
    }));
    
    */
    $("a.remover").on("click", function() {
      $(this).closest("div.dib").remove()
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Label" />
<div id="labels-box">
</div>

Answer 2

如果我的问题正确，那么首先将输入内容附加到enter press上。

然后，您希望在单击链接删除按钮以删除链接时对吗？

如果这就是您想要的，这可能会帮助您：

$("body").on("click", "a.remover", function(){
    var index = $(this).index();
    if(index !== -1){
        items.splice(index, 1);
    }

    $(this).parent().remove();
});

删除创建的元素

2 个答案: