JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<button class="add">Add</button>
<div class="importrLinks">
<ul class="cdnLinks">
</ul>
</div>
CSS
/* Import Links */
.importrLinks {
/* float: left; */
width: 100%;
height: 400px;
padding: 2em 0em;
box-shadow: 0 0 10px 1px #e2e2e2;
overflow: auto;
}
.importrLinks .cdnLinks {
padding-left: 1.5em;
list-style-type: decimal;
}
.importrLinks li.cdnLink {
position: relative;
margin: 1em;
padding: 0.5em;
border-radius: 3px;
}
.importrLinks li.cdnLink:nth-child(odd) {
background-color: #B3DBEF;
}
.importrLinks li.cdnLink:nth-child(even) {
background-color: #D4F3B9;
}
/* Delete Button */
.importrLinks li.cdnLink .deleteLink {
display: none;
position: absolute;
top: 0.5em;
right: 0.5em;
color: #c62828;
opacity: 0.5;
}
.importrLinks li.cdnLink:hover .deleteLink {
display: inline-block;
}
.importrLinks li.cdnLink:hover .deleteLink:hover {
transform: scale(1.2);
cursor: pointer;
opacity: 1;
}
JavaScript
$('body').on('click', '.add', function(event) {
addLink("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{version}/{type}/bootstrap{minifiedState}.{type}", "css", "3.1.0");
});
$('body').on('click', '.deleteLink', function(event) {
console.log($(this));
$(this).closest('.cdnLink').remove();
});
function addLink(linkStructure, type, version) {
var pattern = "{version}";
var regEx = new RegExp(pattern, "g");
var cdnLink = linkStructure.replace(regEx, version);
pattern = "{type}";
regEx = new RegExp(pattern, "g");
cdnLink = cdnLink.replace(regEx, type);
pattern = "{minifiedState}";
regEx = new RegExp(pattern, "g");
cdnLink = cdnLink.replace(regEx, ''); // Handle after adding minified radio buttons
var finalTag = '<span class="tag">';
if (type == 'css') {
finalTag = finalTag + '<link href="' + cdnLink + '" rel="stylesheet" type="text/css">';
} else {
finalTag = finalTag + '<script src="' + cdnLink + '"></script>';
}
finalTag = finalTag + '</span>';
var deleteButton = '<span class="deleteLink fa fa-times"></span>';
$('.importrLinks .cdnLinks').append('<li class="cdnLink">' + finalTag + deleteButton + '</li>');
}