代码概述:此代码由一个可编辑的 div 部分组成。在 div 下方，有一个创建 span 元素的按钮，在 span 元素中插入文本“tag”，最后将 span 元素附加到该可编辑的 div 中
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
<script type="text/javascript">
function addTags()
{
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
}
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
</script>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>
一般观察:当我在 div 中键入内容然后单击按钮时，HTML DOM 将更改为:
<div id="sample-div" contenteditable="true">
this is a <span class="$(tag)" contenteditable="false">tag</span>
</div>
请注意，文本“this is a”是我在 div 元素中键入时提供的。当我点击输入按钮时出现“标签”
期望/尝试实现:当我删除 span 中的文本时，DOM 将更改为:
<div id="sample-div" contenteditable="true">
this is a
</div>
所以，我的目标是在删除span中的文本时获取元素span被删除的信息。我试图通过执行以下操作来实现这一点，但这是不正确的:
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
所以，我的问题是，当 DOM 删除 span 元素时，我如何得到消息“这是空的”？
最佳答案
您可以使用变量作为“标记”计数器。
当 div 中存在的标签数量低于标签计数器时，即一个被删除的时间。
var tagCount = 0;
function addTags(){
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
// Increment tagCount
tagCount++;
}
$(document).ready(function(){
$('#sample-div').keyup(function(){
if($(this).find("span").length < tagCount){
alert('One tag was removed');
// Decrement tagCount
tagCount--;
}
});
}); // Ready#sample-div{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">关于javascript - 如何在自动删除特定 HTML 元素时触发事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46021081/