Add item from array to list when button is clicked in jQuery

Question

I'm building a UI where a user can select from a list, include the selection in an array and then display the array in another list. I'm very close. However, every time I add an item to the list it repeats items.

How do I clear the list before it builds from the array again.

You can see how it works and my code here:

$(document).ready(function(){
    var a = [];
    
  $(".btn").click(function(){
	a.push($(this).next("span").text());
	$(this).closest("li").hide();
    $( "#s" ).text( a.join( " " ) );

    $.each(a, function(i){
        var cList = $('ul.mylist');
    	var li = $('<li/>')
        	.addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(cList);
        var aaa = $('<a/>')
           	.addClass('ui-all')
           	.text(a[i])
            .appendTo(li);      
        });   
    });
});

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Selector</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
   <body>
      <h2>List of Options</h2>
      <ul>
         <li><button class="btn">Select</button><span>One</span></li>
         <li><button  class="btn">Select</button><span>Two</span></li>
         <li><button class="btn">Select</button><span>Three</span></li>
         <li><button class="btn">Select</button><span>Four</span></li>
      </ul>
      <h2>List of Selections</h2>
      <ul class="mylist"> 
      </ul>
      <h2>Array</h2>
      <div>Array of Selected Items to Send to DB:</div>
      <span ID="s"></span>
   </body>
</html>

Arsh Kalsi · Accepted Answer · 2017-01-21 05:04:56Z

You have to empty the Ul html first because you make a each function which append all values of array again and again so it repeat the values. You can see live demo here :- https://jsfiddle.net/Arsh_kalsi01/15zhk00y/

$(document).ready(function(){
var a = [];

 

 $(".btn").click(function(){
  var obj = $(this);
	a.push(obj.next("span").text());
  console.log(a);
	obj.parent().hide();
   $( "#s" ).text( a.join( " " ) );
$('ul.mylist').html("");
    $.each(a, function(i){
        var cList = $('ul.mylist');
    	var li = $('<li/>')
        	.addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(cList);
        var aaa = $('<a/>')
           	.addClass('ui-all')
           	.text(a[i])
            .appendTo(li);      
        });   
    });
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selector</title>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<h2>List of Options</h2>
<ul>
    <li><button class="btn">Select</button><span>One</span></li>
    <li><button  class="btn">Select</button><span>Two</span></li>
    <li><button class="btn">Select</button><span>Three</span></li>
    <li><button class="btn">Select</button><span>Four</span></li>
</ul>
<h2>List of Selections</h2>
<ul class="mylist"> 
</ul>
<h2>Array</h2>
<div>Array of Selected Items to Send to DB:</div>
<span ID="s"></span>
</body>
</html>

Alpha · Accepted Answer · 2017-01-21 04:36:04Z

You can use $.empty (See documentation).

It will empty out the contents of the selected node.

You can do that before you start iterating in the array and your code will behave as you expected it to.

$(document).ready(function(){
    var a = [];
    
  $(".btn").click(function(){
	a.push($(this).next("span").text());
	$(this).closest("li").hide();
    $( "#s" ).text( a.join( " " ) );

    // change here:
    $('ul.mylist').empty();
    $.each(a, function(i){
        var cList = $('ul.mylist');
    	var li = $('<li/>')
        	.addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(cList);
        var aaa = $('<a/>')
           	.addClass('ui-all')
           	.text(a[i])
            .appendTo(li);      
        });   
    });
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selector</title>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<h2>List of Options</h2>
<ul>
    <li><button class="btn">Select</button><span>One</span></li>
    <li><button  class="btn">Select</button><span>Two</span></li>
    <li><button class="btn">Select</button><span>Three</span></li>
    <li><button class="btn">Select</button><span>Four</span></li>
</ul>
<h2>List of Selections</h2>
<ul class="mylist"> 
</ul>
<h2>Array</h2>
<div>Array of Selected Items to Send to DB:</div>
<span ID="s"></span>
</body>
</html>

ibrahim mahrir · Accepted Answer · 2017-01-21 04:38:20Z

1

Just empty the list before you start appending to it using cList.html('') before the $.each (where you shoud define cList because no need to redefine it inside $.each for each element):

var cList = $('ul.mylist');
// clear the content of the list, now the list is empty and ready to be filled again
cList.html('');
$.each(a, function(i){
    var li = $('<li/>')
        .addClass('ui-menu-item')
        .attr('role', 'menuitem')
        .appendTo(cList);
    var aaa = $('<a/>')
        .addClass('ui-all')
        .text(a[i])
        .appendTo(li);      
});

answered Jan 21, 2017 at 4:38

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

halfer · Accepted Answer · 2017-03-18 23:42:00Z

I fixed your issue just put the null or empty array a[] inside the button click and it will clear itself;

$(document).ready(function(){
    var a = [];
    
  $(".btn").click(function(){
    a=[];
	a.push($(this).next("span").text());
	$(this).closest("li").hide();
    $( "#s" ).text( a.join( " " ) );

    $.each(a, function(i){
        var cList = $('ul.mylist');
    	var li = $('<li/>')
        	.addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(cList);
        var aaa = $('<a/>')
           	.addClass('ui-all')
           	.text(a[i])
            .appendTo(li);      
        });   
    });
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selector</title>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<h2>List of Options</h2>
<ul>
    <li><button class="btn">Select</button><span>One</span></li>
    <li><button  class="btn">Select</button><span>Two</span></li>
    <li><button class="btn">Select</button><span>Three</span></li>
    <li><button class="btn">Select</button><span>Four</span></li>
</ul>
<h2>List of Selections</h2>
<ul class="mylist"> 
</ul>
<h2>Array</h2>
<div>Array of Selected Items to Send to DB:</div>
<span ID="s"></span>
</body>
</html>

Collectives™ on Stack Overflow

Add item from array to list when button is clicked in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related