ul - li. New equal row(li), below

Question

Any suggestions?

1. I would like a new li to be created underneath the same li when using the button "new". In my example the .append creates the new li at the bottom.

2. The buttons (new, sub, up, down and x) should appear in the new li, how?

Appologize for if this questions requires a big and quite substantial response and I don´t expect anyone to give it. Then if these list attributes require some other type of coding, .net and other, Im happy to be enlightened...

Thanks David

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button id="btn2">New</button> <button id="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button>X</button> </li> <script> $(document).ready(function() { $("#btn2").click(function() { $("ul").append("<li>..............</li>"); }); }); </script> <script> $(document).ready(function() { $("#btn3").click(function() { $("ul").append("<ul><li>..............</li>"); }); }); </script> <script> $('.up').click(function() { $(this).parent().insertBefore($(this).parent().prev()); }); $('.down').click(function() { $(this).parent().insertAfter($(this).parent().next()); }); </script> <script> $("button").click(function() { $("<li>").remove(); }); </script> </ul> 

Answer 1

Instead of appending to the ul , insert it after the current li element.

Also you can clone and add the buttons, and use event delegation to handle click in the new buttons

 $(document).ready(function() { $("ul").on('click', '.btn2', function() { $("<li/>", { text: '..............' }).append($(this).parent().children('button').clone()).insertAfter(this.parentNode); }); }); $(document).ready(function() { $("#btn3").click(function() { $("ul").append("<ul><li>..............</li>"); }); }); $('ul').on('click', '.up', function() { $(this).parent().insertBefore($(this).parent().prev()); }); $('ul').on('click', '.down', function() { $(this).parent().insertAfter($(this).parent().next()); }); $('ul').on('click', '.remove', function() { $(this).parent().remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button class="btn2">New</button> <button class="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul> 

Answer 2

Hi now used to class as like this

i have used to .prependTo() .closest and .remove()

 $(document).ready(function() { $(document).on('click','.btn2',function() { var thisLi = $(this).closest('li').clone(); $(thisLi).prependTo('ul'); }); $(document).on('click','.remove',function() { $(this).closest('li').remove(); }); // $('.up').click(function() { // $(this).parent().insertBefore($(this).parent().prev()); // }); // $('.down').click(function() { // $(this).parent().insertAfter($(this).parent().next()); // }); // $("button").click(function() { // $("<li>").remove(); // }); // }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button class="btn2">New</button> <button class="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul> 

Answer 3

 $(function(){ $(document).on('click', '.new', newItem); $(document).on('click', '.sub', subItem); $(document).on('click', '.remove', removeItem); $(document).on('click', '.up', moveUpItem); $(document).on('click', '.down', moveDownItem); }); function newItem(){ var $btn = $(this), $li = $btn.closest('li').clone(), $ul = $btn.closest('ul'), count = $ul.find('li').length + 1; $li.find('span').text(count); $li.find('ul').remove(); $ul.append($li); } function subItem(){ var $btn = $(this), $li = $btn.closest('li'), $liClone = $btn.closest('li').clone(), hasSubs = $li.find('ul').length > 0, $ul = hasSubs ? $li.find('ul') : $('<ul>'); var countSubs = $ul.find('li').length + 1; $liClone.addClass('sub-item'); $liClone.find('span').text(countSubs); $liClone.find('ul').remove(); $ul.append($liClone); if(!hasSubs) $li.append($ul); } function removeItem(){ var $li = $(this).closest('li'), liCount = $li.closest('ul').find('li').length; if(liCount > 1 || $li.hasClass('sub-item')) $li.remove(); else alert('este é o ultimo.'); } function moveUpItem () { var $li = $(this).closest('li'), $ul = $li.closest('ul'), index = $li.index() + 1; if(index > 1){ var $temp = $li.detach(); $ul.find('li:nth-child('+(index - 1)+')').before($temp); } } function moveDownItem () { var $li = $(this).closest('li'), $ul = $li.closest('ul'), count = $ul.find('li').length, index = $li.index() + 1; if(index < count){ var $temp = $li.detach(); $ul.find('li:nth-child('+(index)+')').after($temp); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul> <li> <span>1</span> <button class="new">New</button> <button class="sub">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul>