单击 li 或链接时添加 div

Question

I want to add a new div when click on a li or link

The problem is when I click on the first div it works. But I want to add a div when an immediate previous li is clicked. Suppose, when I click on "1" a new div "2" will create. Then if I click on "2" a new div "3" will open and so on. After that, If I click on any previous div, all the divs will close except the next div and previous divs. Suppose, there are 1,2,3,4,5 div open. If I click on 2, only 1,2,3 div will visible. others will hide.

How can I do that?

 $('.title').on('click', function(e) { var isPresent = false; var whoIsIt = $(this).attr('data'); $('#data.data').each(function(index, element) { if ($(this).attr('data-conversation-between') == whoIsIt) { isPresent = true; } }); if (.isPresent) { $('#data').append('<div class="data" data-conversation-between="' + whoIsIt + '"><ul><li class="title"><a href="#"><img src="img/1;jpg" class="profile" alt=""><div class="details"> <p>Tusher</p><p>Designation</p></div></a> </li></ul> </div>'); } }). $(document).ready(function() { $("li").click(function() { $("li");removeClass("active"). $(this).parent();prepend($(this)). $(this);addClass("active"); }); });

 ul { padding: 0px; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a { text-decoration: none; }.data ul { list-style-type: none; }.profile { height: 40px; width: 40px; float: left; margin: 0px 13px; }.details { font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active { background: #ececec; } p { margin: 0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="data"> <ul> <li class="title"> <a href="#"> <img src="img/1.jpg" class="profile" alt=""> <div class="details"> <p>Tusher</p> <p>Designation</p> </div> </a> </li> </ul> </div> <div id="data"> </div>

Answer 1

Just delegate

$('.main').on('click','.title:last', function(e) {

and

$('#data').on('click', '.title', function(e) {
  const hasMore = $(this).closest(".data").next().length;
  if (hasMore>0) $(this).closest(".data").siblings().remove(); // this should have worked
})

 $(function() { $('.main').on('click', '.title:last', function(e) { const $new = $(this).closest('.data').clone(); $('.details p',$new).text('Tusher '+$('.main.data').length) $('.main').append($new) }); $('.main').on('click', '.title', function(e) { const hasMore = $(this).closest('.data').nextAll().length if (hasMore > 1) { $(this).closest(".data").siblings().remove(); } }) });

 ul { padding: 0px; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a { text-decoration: none; }.data ul { list-style-type: none; }.profile { height: 40px; width: 40px; float: left; margin: 0px 13px; }.details { font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active { background: #ececec; } p { margin: 0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="data"> <ul> <li class="title"> <a href="#"> <img src="img/1.jpg" class="profile" alt=""> <div class="details"> <p>Tusher</p> <p>Designation</p> </div> </a> </li> </ul> </div> </div>

Answer 2

I have figured out my problem.

 function childData(_id) { var tRow = $(".organogram li").length, row = parseInt(_id)+1; for (var i = row; i <= tRow; i++) { $("#dept-"+i).remove(); } var data = "<li id='dept-"+row+"' class='team'>" +"<div class='data'><ul> " +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher1</p><p>Designation</p></div></a> </li>" +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher2</p><p>Designation</p></div></a> </li>" +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher3</p><p>Designation</p></div></a> </li>" +"</ul> </div></li>"; $(".organogram").append(data); } function thisNode(_this){ var _id = $(_this).closest(".team").attr("id").match(/\d+/); $(_this).closest("ul").find("li").removeClass( "active" ); $(_this).addClass( "active" ); $(_this).closest("ul").prepend($(_this)); childData(_id); }

 ul{ padding:0px; list-style-type: none; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a{ text-decoration: none; }.data ul{ list-style-type: none; }.profile{ height: 40px; width: 40px; float: left; margin: 0px 13px; }.details{ font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active{ background:#ececec; } p{ margin:0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="organogram"> <li id='dept-1' class='team'> <div class='data'> <ul> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher1</p> <p>Designation</p> </div> </a> </li> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher2</p> <p>Designation</p> </div> </a> </li> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher3</p> <p>Designation</p> </div> </a> </li> </ul> </div> </li> </ul>