2

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>

3
  • If you're just swapping, why am I seeing append?
    – GetSet
    Feb 22, 2020 at 2:14
  • You mean swapping their position after being inserted... Reordering by clicking arrow buttons?
    – Bilel
    Feb 22, 2020 at 2:57
  • Yes I mean swapping their position after being inserted. I am sorry for the incomplete question.
    – R30C5
    Feb 22, 2020 at 11:32

1 Answer 1

2

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

6
  • A cool answer, but I think that the arrows are better designed in styles than constantly switching using a script.
    – bhoodream
    Feb 22, 2020 at 4:10
  • I'm just reusing his code :) Yeah buttons with fontawesome styles, SVGs.. or custom fontello icons are better.
    – Bilel
    Feb 22, 2020 at 4:13
  • I have svgs icon inside buttons in my code but I adjusted for this example. Stack overflow gave me a lot of errors for my primary code.
    – R30C5
    Feb 22, 2020 at 11:37
  • I see.. And you don't consider my answer as an accepted answer? :)
    – Bilel
    Feb 22, 2020 at 15:18
  • I do but I am new on this website so I don't know exactly how to use it ...
    – R30C5
    Feb 22, 2020 at 22:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.