如何自動刪除特定的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元素時觸發事件？

回答

相關問題