javascript - 删除创建的元素

Question

我有一个文本输入，当您编写文本并按回车键时，文本输入是清晰的，并在下面添加该文本并使用关闭 anchor 链接作为标签。我希望当我点击关闭链接时，该标签被删除。删除注释的代码关于js代码。

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>