JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="dragDivId0" class="tree_padd tree Sub_plan panel panel-info" ondrop="drop(event,0)" ondragover="allowDrop(event)">
  <div class="drg panel-heading text-center" id="drg0">Gold Plan</div>
  <div class="panel-body dropTarget ui-droppable" style="display: block; overflow-y: auto; padding-bottom: 0px; min-height: 118px;">
    <a class="droggIng" id="dragbutton" draggable="false" ondragstart="drag(event)">
      <scan style="margin-right:10px; cursor:all-scroll;">Junos Security Overview</scan><i class="glyphicon glyphicon-remove remove_gly" onclick="removespan(this)"></i></a>
    <a class="droggIng" id="dragbutton" draggable="false" ondragstart="drag(event)">
      <scan style="margin-right:10px; cursor:all-scroll;">Firewall User Authentication</scan><i class="glyphicon glyphicon-remove remove_gly" onclick="removespan(this)"></i></a>
    <a class="droggIng" id="dragbutton" draggable="false" ondragstart="drag(event)">
      <scan style="margin-right:10px; cursor:all-scroll;">Screens</scan><i class="glyphicon glyphicon-remove remove_gly" onclick="removespan(this)"></i></a>
  </div>
  <a class="" id="dragbutton" draggable="false" ondragstart="drag(event)"></a>
</div>

CSS

.tree_padd button {
  margin-left: 5px;
}

.drg {
  color: #428bca;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
}

a:hover {
  text-decoration: none;
}

a.droggIng {
  margin-left: 3px;
  font-family: serif;
  font-size: 14px;
  color: #000;
  background: #d9edf7 none repeat scroll 0 0;
  padding: 10px;
  border-radius: 5px;
  color: #31708f;
  margin-bottom: 5px;
  font-family: sans-serif;
}

a.droggIng:hover {
  text-decoration: none;
}

.droggIng:hover {
  text-decoration: none;
}

JavaScript

$(document).ready(function (){
	$(".remove_gly").click(function () {
		//alert('Clicked');
		//var catName = $(span).closest('a').text();
	//	var index = subscriptionArrays.indexOf(catName);
	//	if (index > -1) {
//subscriptionArrays.splice(index, 1);
	//	}

		//span.parentNode.innerHTML = span.innerHTML;
		$(this).closest(".droggIng").removeClass("droggIng"); 
	});
});