CODEWITHSUNDEEP
javascriptjquery
Jose Ruiz
Jose Ruiz

Reputation: 77

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

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>

Upvotes: 0

Views: 936

Answers (4)

Hiren Jungi
Hiren Jungi

Reputation: 854

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>

Upvotes: 0

Arsh Kalsi
Arsh Kalsi

Reputation: 179

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>

Upvotes: 1

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

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);      
});

Upvotes: 1

Alpha
Alpha

Reputation: 7868

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>

Upvotes: 1

Related Questions