JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <!-- add new item Dynamically in the show block -->
  <div id="showBlock1">
    Test content remove
    <div>
    我也想要被刪除
    </div>
  </div> 
  <div id="showBlock2">
    Test content empty
    <div>
    我也想要被刪除2
    </div>
  </div> 
  <!-- click the button to add new item -->
  <input type="button" id="btn1" value="removeTxt"/>  
  <input type="button" id="btn2" value="emptyTxt"/>  
</body>

CSS

#showBlock1 {border:1px solid #ff0000;}
#showBlock2 {border:1px solid #00ff00;}

JavaScript

//add text after the last child
var crypto = require("crypto");

var algorithm='aes-256-cbc';
var key = new Buffer("aaaabbbbccccddddeeeeffffgggghhhh");
var iv = new Buffer("1234567812345678");
function encrypt(text){
    var cipher=crypto.createCipheriv(algorithm,key,iv);
    cipher.update(text,"utf8");
    return cipher.final("base64");
}
function decrypt(text){
    var cipher=crypto.createDecipheriv(algorithm,key,iv);
    cipher.update(text,"base64");
    return cipher.final("utf8");
}
$(function(){
var text="ni你好hao";
var encoded=encrypt(text)
$('#showBlock1').text((encoded));
$('#showBlock2').text((decrypt(encoded)));
});