JSFiddle - React, Tailwind, and code Playground

by chanonroy

HTML

<button class='append' type='button'> Append </button>

<div id="team">
    <div id="team-default" class="team-player">
      <span> 1 </span>
      <span> 2 </span>
      <span> 3  </span>
      <span> 4 </span>
      <span> remove </span>
    </div>
</div>

<div id='dog'>
  Hello Doggy
  <button class='remove' type='button'> Remove </button>
</div>

<div id='duck'>
  Hello Duck
  <button class='remove' type='button'> Remove </button>
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

JavaScript

$('.append').click(function() {
	$('#team').children().children().eq(3).append("<button class='remove' type='button'> Remove </button>");
});

$('#kitty').on("click", '.remove', function() {
	var name = $(this).parent().parent().parent().attr('id');
  // func
  $('#' + name).empty();
});