如何通过单击按钮更改添加元素的顺序？

Question

I need help with following code. I have to add new li elements and them swap elements by clicking on img up or down. I need to do it dynamically. Thank you so much.

 $(document).ready(function(){ $(".p-title").hide().fadeIn(1500); const nameInput = document.querySelector('#f-name'); nameInput.focus(); $('form').on('submit', e=>{ e.preventDefault(); let name = nameInput.value; addItem(name); }) let addItem = (name)=>{ $('#list').append('<li>'+name+'<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>'); nameInput.value = ''; nameInput.focus(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main class="container"> <div class="row"> <div> <h4> <span class="text-muted">List</span> </h4> <ul id='list' class="list-group mb-3"> </ul> </div> <div class="col-md-7 order-md-1"> <form class="needs-validation row-form"> <div class="mb-3"> <label for="nazov">Name</label> <input id="f-name" type="text" class="form-control" placeholder="name" required> </div> <hr class="mb-4"> <button>Submit</button> </form> </div> </div> </main>

Answer 1

To reorder those dynamically added list' items using images (buttons) we set a click handler by selecting their parent container first because those images are also dynamically added !

$('#list').on('click', '.downArrow', function(e) {

Then we use insertAfter() to move Down or insertBefore() to move Up their position in the list.

 $(document).ready(function(){ $(".p-title").hide().fadeIn(1500); const nameInput = document.querySelector('#f-name'); nameInput.focus(); $('form').on('submit', e=>{ e.preventDefault(); let name = nameInput.value; addItem(name); }) let addItem = (name)=>{ $('#list').append('<li>'+name+'<img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Green_Arrow_Up_Darker.svg" class="upArrow"/ width="16"><img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Red_Arrow_Down.svg" width="16" class="downArrow"/</li>'); nameInput.value = ''; nameInput.focus(); } $('#list').on('click', '.downArrow', function(e) { var curLi = $(this).closest('li'); var tarLi = curLi.next('li'); curLi.insertAfter(tarLi); }); $('#list').on('click', '.upArrow', function(e) { var curLi = $(this).closest('li'); var tarLi = curLi.prev('li'); curLi.insertBefore(tarLi); }); });

 body{ font-size:1.2em; } li:last-child img.downArrow,li:first-child img.upArrow{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main class="container"> <div class="row"> <div> <h4> <span class="text-muted">List</span> </h4> <ul id='list' class="list-group mb-3"> </ul> </div> <div class="col-md-7 order-md-1"> <form class="needs-validation row-form"> <div class="mb-3"> <label for="nazov">Name</label> <input id="f-name" type="text" class="form-control" placeholder="name" required> </div> <hr class="mb-4"> <button>Submit</button> </form> </div> </div> </main>

[UPDATE] optimized the answer by changing the styling to hide button on the edges... which is better than doing it with jQuery. thanks to @ bhoodream comment