JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<div id="container">
  <a href="#" onclick='addMetric();'> Add new metric </a>
</div>

CSS

#container input[type='radio']:checked ~ a {
  display: none;
}

JavaScript

let id = 0;
const container = $('#container');
const metricItem = (id,checked) => `<div id="metric${id}"><input type="text"/><input type="radio" name="primary" ${checked?"checked='checked'":''}><a  class='delete' href="#"> Delete </a></div>`;


window.addMetric = () => $('#container').prepend(metricItem(id++))


window.deleteItem = (id) => $(id).remove();


container.prepend(metricItem(id++,true))
container.on('click','.delete',(e) => {
    event.target.parentNode.remove();
});

/* container.on('click',(e) => {
  if($(event.target).is('.delete')){
    if($(event.target.parentNode).find("input[type='radio']").is(':checked')){
      alert('you cannot delete a primary metric');
      return;
    }
    $(event.target.parentNode).remove();
  };
}); */