Jquery adding dropdown dynamically and removing it when unchecked

Question

I have a form below where when a user selects a sport, it is dynamically added. I have implemented code where if a sport is already there, it can not be added again. What I cant figure out is if a user unchecks a sport, I want it removed from the list and the array to and the user is able to add it again.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Item listing</title>
</head>
<body>
 <form action="test.htm" method="get">
    <select name="mylist" id="myList">
      <option id="1">Baseball</option>
      <option id="2">Soccer</option>
      <option id="3">Basketball</option>
      <option id="4">Volleyball</option>
      <option id="5">Hockey</option>
      <option id="6">Football</option>
      <option id="7">Rugby</option>
      </select>
  <br />
  <div id="sList">
  </div>
  <br />
  <input type="submit" value="Submit" />
  </form>
<script type="text/javascript">
    //add item when selected
    //a sport can not be added twice
    var allVals = [];
    $('#myList').change(function () {
        if ($.inArray(this.value, allVals) == -1) {
            allVals.push($(this).val());
            document.getElementById("sList").innerHTML += "<input checked =\"checked\" id=\"wList\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\">" + this.value + "<br />";
        }
    });

    //remove sport when unchecked
    $('#wList').change(function () {
       //???
    });

    //submit should send checked sports

</script>
</body>
</html>

@gdoron Several functions for removing an element from the DOM. — JDB
– JDB, Commented Jan 15, 2013 at 19:58
Is it possible to access the dynamically added checkbox? A simple test didn't return anything: ` $('#wList').change(function () { alert("test"); });` — mpora
– mpora, Commented Jan 15, 2013 at 20:23

isherwood · Accepted Answer · 2013-01-15 20:52:13Z

1

Here's how you might remove items from the list. Note that I've made several changes to your code... I've changed the checkbox ID to class--IDs must be unique. I've added labels around your checkboxes to make them more accessible and to make the labels clickable. I've removed the
tags after the inputs. Use CSS instead for easier formatting and to simplify the necessary jQuery.

http://jsfiddle.net/j6G2Y/

//add item when selected
//a sport can not be added twice
var allVals = [];
$('#myList').change(function () {
  if ($.inArray(this.value, allVals) == -1) {
    allVals.push($(this).val());
    document.getElementById("sList").innerHTML += "<label class=\"wList\"><input checked =\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\"> " + this.value + "</label>";
  }
});

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    $(this).parent('.wList').remove();
  }
});

//submit should send checked sports

You should be able to remove the item from your array with something like this:

http://jsfiddle.net/j6G2Y/1/

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    var thisVal = $(this).val();
    var index= $.inArray(thisVal, allVals);

    allVals.splice(index,1); alert(allVals);

    $(this).parent('.wList').remove();
  }
});

I've left some alerts in place to monitor the array.

edited Jan 15, 2013 at 20:52

answered Jan 15, 2013 at 20:28

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mpora Over a year ago

Nice work. The only thing is that IE is now acting up. The value field is not showing up in IE 8 and the items get added up multiple times.oi48.tinypic.com/33atqwh.jpg

mpora Over a year ago

Fixed by swapping this.value for $(this).val(). Anyone care explaining the difference. jsfiddle.net/j6G2Y/5

Collectives™ on Stack Overflow

Jquery adding dropdown dynamically and removing it when unchecked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related