JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<script>
var cancel  = function(id)  {

 var $el = $('[data-id="' + id + '"]');

 

    if ($el.hasClass('with-paragraph-'+id)) {
                           var $current = [], j = 0;

                           $el.children('span.paragraph p')
                               .each(function(i, val){
                                   $current[i] = val;
                                   j++;
                               });

                           var $current_1 = $current[0],
                               $current_2 = $current[1];

                           for (var i=0; i < $el.children('span.paragraph p').length; i++) {
                               if (i != $el.children('span.paragraph p').length - 1) {
                                   var $prev =  $el.parent().find('.with-paragraph-'+id).prev();
                                   // $prev.attr('id', 'prev_'+id);
                                   $($prev).html($($prev).html() + $($current_1).html())
                               } else {
                                   var $next = $el.parent().find('.with-paragraph-'+id).next();
                                   // $next.attr('id', 'next_'+id);
                                   $($next).html($($current_2).html() + $($next).html())
                               }
                           }

                           $el.remove();
                       } else {
                           $el.contents().unwrap();
                       }

}
</script>

<button onclick="cancel('123')">
Cancelar normal
</button>
<button onclick="cancel('321')">
Cancelar parágrafo
</button>
<div class="text-review">

<p>Gasolina, tomate e remédios foram os vilões do mês</p>

<p>

Já os principais impactos <span data-id="123" class="color hightcolor-3">individuais no mês</span>, segundo o IBGE, vieram das altas da gasolina (2,66%), tomate (28,64%) e dos remédios (2,25%), refletindo este último o reajuste anual, em vigor desde asfdasf saf.</p>

<p>

Outros...

CSS

.color.hightcolor-3 {
      background-image: linear-gradient(to right, transparent 50%, #b7ca58 50%);
    background-origin: 0;
    background-size: 200% 90%;
    background-repeat: repeat-x;
    background-position: -100% 100%;
    transition: background-position 0.5s;

}
.color {
      cursor: pointer;
    position: relative;
    color: white;
    padding: 4px;
}
.color p {
  display:contents;
  }
p {
  font-family: sans-serif;
  margin: 18px 0;
    text-align: justify;
    width: auto;
    font-size: 15px;
}