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

代码概述：此代码由可编辑的div部分组成。下面的股利，还有它创建了一个span元素的按钮，插入在span元素文本“标签”，最后追加span元素在编辑DIV如何自动删除特定的HTML元素时触发事件？

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

请注意，文本“这是一个”，由我当我的div元素内键入提供。当我删除跨距中的文本中，DOM将改变：

<div id="sample-div" contenteditable="true"> 
    this is a 
</div>

所以，我的目标是当我点击输入按钮

展望/努力实现“标记”出现以获取当我删除跨度中的文本时删除元素跨度的信息。我试图用以下方法，这是不正确的做到这一点：

$(document).ready(function(){ $('span').keyup(function(){ if(!this.value) { alert('this is empty'); } }); });

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

来源

2017-09-03 rupali317

您可以使用变量作为“标签”计数器。
当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()">

来源

2017-09-03 07:33:30

'tagCount = $（本）.find（ “跨度”）。length'会如果一次删除多个跨度，请避免出现问题。 – Kaiido

你或许应该使用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

来源

2017-09-03 07:39:11 Tns

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

回答

相关问题