Replace class when canceling highlighted text

by crduling

HTML

<div class="article">
  <span class="highlights">article text here</span> <!-- click this text -->
</div>

<div class="result-container">
  
</div>

CSS

.highlights:hover {
	background-color: #D0D0D0;
	cursor: pointer;
}

.article {
  width: 35%;
  height: 30%;
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
}

.result-container {
  width: 35%;
  height: 30%;
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
}

.appendedDiv {
  border-style: solid;
  
}

JavaScript

$("body").on("click", ".highlights", function() {

	let highlightedText = $(this).text();
  
  $(this).removeAttr("class");
  
  let newContent = 
  "<div class='appendedDiv'>"+
  	"<p>"+highlightedText+"</p>"+
    "<button class='cancelResponses'>Cancel</button>"+
  "</div>";
  
  let appended = $(newContent).appendTo(".result-container");

		$("body").on("click", ".cancelResponses", function() {

      let $text = $(".article");
      let textCurrent = $text.html().trim();
      let textToHighlight = highlightedText.trim();
      let ifTextExists = textCurrent.indexOf(textToHighlight) > -1;
      
      if (ifTextExists) {
      
      	textCurrent = textCurrent.replace(textToHighlight, "<span class='highlights'>"+textToHighlight+"</span>");
        $text.html(textCurrent);
      
      }
      
      $(this).parent().remove();

    });

});