Question

代码概述：此代码由可编辑的div部分组成。在div下面，有一个创建span元素的按钮，在span元素中插入文本“tag”，最后在可编辑的div中附加span元素

select deptno
     ,emp_count from 
(
select deptno from EMPLOYEE
)
PIVOT
( COUNT(name) 
  for deptno in('10','20','30')
);

一般观察：当我在div中输入内容然后点击按钮时，HTML DOM将更改为：

ORA-00904: "NAME": invalid identifier
00904. 00000 -  "%s: invalid identifier"

请注意，当我在div元素内输入时，由我提供的文本“this is a”。单击输入按钮

时出现“tag”

期望/尝试实现：当我删除范围中的文本时，DOM将更改为：

<!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>

因此，我的目标是在删除span中的文本时获取元素跨度的信息。我试图通过执行以下操作来实现这一点，这是不正确的：

<div id="sample-div" contenteditable="true">
    this is a <span class="$(tag)" contenteditable="false">tag</span>
</div>

所以，我的问题是当DOM删除span元素时如何得到“这是空的”消息？

Answer 1

您可以将变量用作＆＃34;标记＆＃34;计数器。
当div中存在的数量标签低于标签计数器时，就是当一个被删除时。

＆＃13;

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

＆＃13;

#sample-div{
  border-style: solid;
  border-width: 1px;
  border-color: black;
  height:100px;
  overflow: auto;
}

＆＃13;

<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()">

＆＃13;

Answer 2

您可能应该使用MutationObserver

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        #sample-div
        {
            border-style: solid;
            border-width: 1px;
            border-color: black;
            height:100px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="sample-div" contenteditable="true"></div>
    <input type="button" value="date" id="sample-tags" onclick="addTags()">
    <script type="text/javascript">

        'use strict';

        function addTags()
        {
            var tag = document.createElement("span");
            tag.className = "$(tag)"
            tag.innerHTML = "tag";
            tag.contentEditable = false;
            document.getElementById('sample-div').appendChild(tag);
        }

        function onTagRemoved(node)
        {
            alert(`node ${node.tagName}.${node.className} removed`);
        }

        //
        // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
        //

        // select the target node
        let target = document.querySelector('#sample-div');

        // create an observer instance
        let observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {

                // console.log(mutation);

                let node = null;
                for (var i = 0; i < mutation.removedNodes.length; i++) {
                    node = mutation.removedNodes[i];
                    if (/span/i.test(node.tagName)) {
                        onTagRemoved(node);
                    }
                }
            });
        });

        // configuration of the observer:
        let config = { attributes: false, childList: true, characterData: false }

        // pass in the target node, as well as the observer options
        observer.observe(target, config);

        // later, you can stop obser
        // observer.disconnect();

    </script>
</body>
</html>

在Firefox 52上测试

如何在自动删除特定HTML元素时触发事件？

2 个答案: