I try to allow user create own list with tree view, but when I select ul:last-child it doesn't run correct also if I not use ul:last-child still doesn't run correct. Here is my code snippet
JS Functions;
<script type="text/javascript">
function addData(){
let text = "";
Swal.fire({
title: 'Add Element',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Add',
showLoaderOnConfirm: true,
cancelButtonText: "Cancel",
allowOutsideClick: () => !Swal.isLoading()
}).then((text) => {
$("#treeview ul").append("<li>"+text.value+"</li>");
})
}
function goSubTitle(){
$("#treeview ul li").append("<li><ul>");
}
function goTitle(){
$("#treeview ul li").append("</ul></li>");
}
</script>
here screenshots;
without ul:last-child
with ul:last-child
Here is full of HTML codes
<table border style="width: 100%;">
<tr>
<td style="width: 30%;">Your List</td>
<td style="width: 70%;">
<div class="row">
<div class="col-md-8" id="treeview">
<ul>
</ul>
</div>
<div class="col-md-1">
<button class="btn btn-success" onclick="goTitle()"><</button>
</div>
<div class="col-md-2">
<button class="btn btn-success" onclick="addData()">Insert Data</button>
</div>
<div class="col-md-1">
<button class="btn btn-success" onclick="goSubTitle()">></button>
</div>
</div>
</td>
</tr>
</table>
I solved it with this changes
<script type="text/javascript">
let code = "";
let index= 0;
function addData(){
let text = "";
Swal.fire({
title: 'Enter your value',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Add',
showLoaderOnConfirm: true,
cancelButtonText: "Cancel",
allowOutsideClick: () => !Swal.isLoading(),
preConfirm: (text) => {
code = parseInt($("#treeview li").length);
$("#treeview ol."+index+":last").append("<li>" + text + "</li>");
}
})
}
function goSubTitle() {
index += 1;
$("#treeview li:last").append("<ol class="+index+"></ol>");
}
function goTitle() {
index -=1;
if(index == 0)
{
index = 0;
}
}
</script>
Index started with value of "0" and first ol looks like <ol class="0"></ol>.
The reason of the problem, when I try to append <ul> or <li>, jQuery automatically closes the html tag.