Concatenation as a comma separated string - Jquery

Question

I have a list of elements, two user input fields, and two buttons. User enters a value in the 1st input field and clicks on the button. The entered value should be appended to the existing list and should also reflect in the space provided below the input fields. All the added values should form a comma separated string.

Ex: car, bike, bus

How to concatenate a variable which is a user input value to form a comma separated line using jquery?

Html:

    <ol id="list">...</ol> 

    <input class="Add">
    <button id="btn1"> Add </button>
    Added item : <div class="Additem"></div>

Jquery:

$("#btn1").click(function(){
var additem = $(".Add").val();
$("#list").append("<li>" + additem + "</li>");
$(".Additem").append("<div>" + additem + "</div>");

Line 4 in the above code appends the variable but in a different line.

Above operation shows a method of appending a user input value to list. What is the method to delete a user input value which is a part of list?

trincot · Accepted Answer · 2016-12-17 15:12:14Z

You could do it like this:

$("#btn1").click(function(){
    var additem = $(".Add").val();
    $("#list").append($("<li>").text(additem));
    $(".Additem").text(($(".Additem").text() + ', ' + additem).replace(/^, /, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="list"></ol> 
<input class="Add">
<button id="btn1"> Add </button><br>
Added item : <div class="Additem"></div>

Explanation

The addition of ', ' + additem does not need explanation, but it will result in a string that starts with ,, while the commas should only appear between items. This can be solved in many ways, but here I have applied a replace to remove any such comma from the start of the string:

.replace(/^, /, '')

The forward slashes (/) delimit a regular expression literal. The caret (^) requires the characters to be matched to be at the start of the string. The comma and space are taken literally. So if a comma-space sequence is found at the start of the string, it is replaced by '' in the return value of the replace method.

Alternative

If you would start out with adding empty values to your list, the above solution would trim them from the string representation. So if in that case you want to see , , , hello, world (instead of hello, world) when the list shows 5 entries (first three empty), then you could use this code:

$("#btn1").click(function(){
    var additem = $(".Add").val();
    $("#list").append($("<li>").text(additem));
    $(".Additem").text($("#list li").map(function () {
        return $(this).text();
    }).get().join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="list"></ol> 
<input class="Add">
<button id="btn1"> Add </button><br>
Added item : <div class="Additem"></div>

Thank you. Would like to know how can be a remove operation written? Just like adding to a list, if I want to remove an item from list. @trincot
That really is a different question. Feel free to post a new question, with an example, and code you have tried with. There will be lots of people going to help you with that, and ... you'll get some extra reputation if you write that question well. ;-)
@ananthreddy Use .split() to turn the string into an array. Remove the element from the array. Then use .join() to turn the array back into a comma-separated string.
@trincot Can you please elaborate on what is really happening in the part replace(/^, /, '')

TigOldBitties · Accepted Answer · 2016-12-17 13:19:24Z

0

Try

$(".Additem").text($(".Additem").text() + ', ' + additem)

instead of your 4th line.

answered Dec 17, 2016 at 13:19

TigOldBitties

1,3359 silver badges15 bronze badges

Collectives™ on Stack Overflow

Concatenation as a comma separated string - Jquery

2 Answers 2

Explanation

Alternative

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Explanation

Alternative

8 Comments

Comments

Related