JSFiddle - React, Tailwind, and code Playground

by Charlotte Jhao

HTML

<body>
  <!-- add new item Dynamically in the show block -->
  <div id="showBlock1">
    Test content remove
  </div> 
  <div id="showBlock2">
    Test content empty
  </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
  $("#btn1").click(function () {
    $("#showBlock1").remove();
  });
  
//add text before the last child
  $("#btn2").click(function () {
    $("#showBlock2").empty();
  });