使用 jquery 从数组列表中添加和删除数组项

Question

I would like to establish a function where you can add and remove users

1. to comma separated string which is stored in an input field and

2. Show the list of added users in html to delete each line item if needed.

Unfortunately I have the following issues in my code:

1. The comma separated userlist + html list adds the user to each new created line item

2. Deleting one line item from HTML list doesn't work as expected.

Expected result:

input value: Adam,Bertha,Caesar

html value:

Adam (delete)

Bertha (delete)

Caesar (delete)

Could you please have a look at my js fiddle and give me a hint how to display the userlist correctly in html + input field?

 var users = []; $("#adddis").click(function() { var values = $('input[type=text]').map(function() { return $(this).val(); }).get().join(); $('#adddisnames').val(""); addUser(values); }); function buildUserlist() { var html = "<hr>"; for (var i = 0; i < users.length; i++) { html += users[i] + ' <a href="#" onclick="removeUser(' + i + '); return false;">X</a><br>'; }; $('#userdiv').html(html); } function addUser(values) { users.push(values); buildUserlist(); $('#storadddis').val(users); } function removeUser(index) { users.splice(index, 1); buildUserlist(); $('#storadddis').val(users); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label>Name</label> <input type="text" id="adddisnames" value=""> <input type="button" name="get_value" id="adddis" value="add"> => <input type="text" id="storadddis" size="35"> <div id="userdiv"></div>

Answer 1

First : Change this code to this

 $("#adddis").click(function() {
     if ($('#adddisnames').val().length !== 0) {
       addItem($('#adddisnames').val());
     } else {
        alert ('Please add User!')
     }
});

Next : change this code also to this

function addItem(values) {
  users.push(values);
  buildUserlist();
  $('#storadddis').val(users.toString());
  $('#adddisnames').val("");

}  

Answer 2

You should use the users array as the master of the data. When adding names, don't take that input value together with what is in the rightmost input . Consider the text in that rightmost control as an output , not as input.

As you use jQuery, I would also use jQuery to the full for populating the div element. This way you are also sure that any characters in the usernames, that could be misinterpreted as HTML, are properly escaped.

For the click handler: it is probably better to use event delegation, and only define one click handler on the div element, once . You can know which link was clicked with the .index() jQuery method.

 var users = []; $("#adddis").click(function() { addUser($('#adddisnames').val().split(",")); // pass an array as argument $('#adddisnames').val(""); }); $('#userdiv').on("click", "a", function () { // event delegation removeUser($(this).parent().index()); }); function buildUserlist() { // Use jQuery functions to build the DOM list: $('#userdiv').empty().append( users.map(function (user) { return $("<div>").text(user).append($("<a>").attr("href", "#").text("✘")); }) ); $('#storadddis').val(users); // do this here -- as it is part of the output } function addUser(values) { // Expect an array as argument here values = values.map(value => value.trim()) // trim values .filter(Boolean); // ... and exclude empty entries users = users.concat(values); // join the two arrays users = Array.from(new Set(users)); // make list unique buildUserlist(); } function removeUser(index) { users.splice(index, 1); buildUserlist(); }

 a[href] { color:red; padding-left: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Name</label> <input type="text" id="adddisnames" value=""> <input type="button" name="get_value" id="adddis" value="add"> => <input type="text" id="storadddis" size="35"> <div id="userdiv"></div>

Answer 3

without Telling you to update everything to make it cleaner. I think your simple fix is to update this line:

var values = $('input[type=text]').map(function() {

To

var values = $('input[id=adddisnames]').map(function() {

The way you had it before is it was finding both input fields, and then duplicating your results