javascript - 删除创建的元素
问题描述
我有一个文本输入,当你写一个文本并按回车键时,文本输入是清晰的,并在下面添加带有关闭锚链接的文本作为标签。我想当我点击关闭链接时,该标签被删除。删除对 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>
解决方案
您可以在事件中移动删除逻辑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>
推荐阅读
- sql-server - 从脚本恢复数据库
- python - 如何阻止 Python 程序不断增加内存使用量?
- java - UI 自动化 - 没有与 Java 互操作匹配的步骤定义方法
- python - 如何破译终端在说什么,并可能提供如何让代码工作的解决方案?
- r - R:将字符日期列表转换为给定来源的“天数”
- vue.js - 尊重整个单词的子字符串。Vue.js
- java - 如何将我的 JSON 数据写入外部存储
- go - goroutine 调度如何与 GOMAXPROCS 一起工作?
- python-3.x - 在 UWSGI 中找不到 Flask 模块
- ios - 解码在字符串中转义的 JSON 对象