JSFiddle - React, Tailwind, and code Playground

by Alex Alexandrov

HTML

<div class="text">Какой-то текст</div>
<div class="block">
  <span class="added">Я новый элемент</span> - <span id="delete_me">Удалить</span>
</div>
<span class="" id="addNew">Добавить элемент</span>

CSS

.text {
  background-color: green;
  display: inline-block;
 }

#addNew {
  margin-top: 20px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid black;
}

.added {
  color: green;
}

#delete_me {
   color: red;
   cursor: pointer;
}

JavaScript

$('#addNew').click(function() {

 $(this).before('<div class="block"><span class="added">Я новый элемент</span> - <span id="delete_me">Удалить</span></div>');
  	});
    
$(document).on('click','#delete_me',function() {
 	$(this).parent('div').remove();
  
});