Dogsled Dogsled - 3 months ago 19
jQuery Question

Individual Buttons to Remove Values Entered In Datalist

I have a datalist that will contain a large number of options. I have created a script that when a new value is entered in the data list it is shown in the HTML next to a "Remove" button which I'm not sure how to make functional.

I'm hoping for help on two things:
1) Making the "Remove" button functional so that the individual entry is removed.
2) When the page is loaded, grab the comma separated list (if any) from the element with id="savedvalues" and create the "Remove" button structure.

<script>
$(document).ready(function(){

var BrowserList =[];

//When the Add Button is clicked...
$("#button").click(function(){
var selected = $("#datalistID").val();

if(selected === ''){
//Do nothing
}
else {
BrowserList[BrowserList.length] = selected;
}

//Output the results
var EntriesAndButtons = '<ul>';
var Entries = '';
for(var i=0; i< BrowserList.length; i++) {

EntriesAndButtons += "<li>" + BrowserList[i] + " " + '<input type="button" id="removebutton" value="Remove" /></li>';
Entries += BrowserList[i] + ", ";
}

//After the loop finish the results
EntriesAndButtons += '</ul>';
CleanedEntries = Entries.slice(0,-2); //Remove the space and comma
//After the loop output the results.
$('#thelist').html(EntriesAndButtons);
$("#savedvalues").val(CleanedEntries);
});

});
</script>

<body>
Select your Test Spec:
<input list="browsers" id="datalistID">
<datalist id="browsers">
<option value="ASTM B117"></option>
<option value="ASTM B368"></option>
<option value="ASTM B467"></option>
<option value="ASTM B469"></option>
<option value="ASTM C234"></option>
<option value="ASTM C317"></option>
<option value="ASTM C456"></option>
<option value="ASTM C657"></option>
<option value="ASTM D211"></option>
<option value="ASTM D233"></option>
<option value="ASTM D334"></option>
<option value="ASTM D345"></option>
<option value="ASTM D467"></option>
<option value="ASTM D469"></option>
<option value="ASTM E234"></option>
</datalist>
<input id="button" type="button" value="Add">

<br><br>You've selected:
<p id="thelist"></p>

<br>
This text field is where the values should be stored:
<input type="text" id="savedvalues" name="browservalues" value="Chrome">
</body>


https://jsfiddle.net/q354797e/8/

Answer
  • Read about Event delegation to attach event over dynamic elements.
  • Iterate all ULPARENT li elements to get the all the li elements textContent
  • Use Array#join to join array elements with glue as ,

$(document).ready(function() {
  var BrowserList = [];
  $("#button").click(function() {
    var selected = $("#datalistID").val();
    if (selected !== '') {
      BrowserList.push(selected);
    }
    var EntriesAndButtons = '<ul id="ulParent">';
    var Entries = '';
    for (var i = 0; i < BrowserList.length; i++) {

      EntriesAndButtons += "<li>" + BrowserList[i] + " " + '<input type="button" class="removebutton" value="Remove" /></li>';
      Entries += BrowserList[i] + ", ";
    }
    EntriesAndButtons += '</ul>';
    CleanedEntries = Entries.slice(0, -2);
    $('#thelist').html(EntriesAndButtons);
    $("#savedvalues").val(CleanedEntries);
    $("#datalistID").val('');
  });
  $('#thelist').on('click', '.removebutton', function() {
    $(this).closest('li').remove();
    var val = [];
    BrowserList = [];
    $('#ulParent li').each(function() {
      val.push(this.textContent);
      BrowserList.push(this.textContent);
    });
    $("#savedvalues").val(val.join(', '));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Select your Test Spec:
<input list="browsers" id="datalistID">
<datalist id="browsers">
  <option value="ASTM B117"></option>
  <option value="ASTM B368"></option>
  <option value="ASTM B467"></option>
  <option value="ASTM B469"></option>
  <option value="ASTM C234"></option>
  <option value="ASTM C317"></option>
  <option value="ASTM C456"></option>
  <option value="ASTM C657"></option>
  <option value="ASTM D211"></option>
  <option value="ASTM D233"></option>
  <option value="ASTM D334"></option>
  <option value="ASTM D345"></option>
  <option value="ASTM D467"></option>
  <option value="ASTM D469"></option>
  <option value="ASTM E234"></option>
</datalist>
<input id="button" type="button" value="Add">

<br>
<br>You've selected:
<p id="thelist"></p>

<br>This text field is where the values should be stored:
<input type="text" id="savedvalues" name="browservalues" value="Chrome">