<input type=button onclick=”AddContentsList()” value=”TEST BTN”>
<input type=button onclick=”DelCtsList()” value=”DEL ALL”>
<input type=button onclick=”DelCtsEachList(‘1’)” value=”DEL EACH”>
<div class=”col-12″>
<ul class=”list-group” id=”ctsListBox” name=”ctsListBox” >
</ul>
</div>
<script>
function AddContentsList()
{
var ul = document.querySelector(“#ctsListBox”);
var text = “TEST LIST”;
var add_classname = $(“#CLASSNAMD”).val();
var button = document.createElement(“button”);
button.innerHTML = “X”;
button.addEventListener(‘click’, function() {DelCtsEachList(add_classname);},false);
var li = document.createElement(“li”);
// Add Bootstrap class to the list element
li.classList.add(“list-group-item”);
li.classList.add(add_classname);
li.appendChild(document.createTextNode(text+” “+add_classname));
li.appendChild(button);
ul.appendChild(li);
}
function DelCtsEachList(ABC)
{
$(“.”+ABC).detach();
}
function DelCtsList()
{
var cell = document.getElementById(“ctsListBox”);
while ( cell.hasChildNodes() ) { cell.removeChild( cell.firstChild ); }
}
</script>
