Remove selected option from dropdown list

Question

I have built a dropdown using an unordered list.

It looks like this:

<div id="dd" class="wrapper-dropdown" tabindex="1">
    <span>Default Option</span>
    <ul class="dropdown">
        <li><a href="#"><i></i>Default Option</a></li>
        <li><a href="#"><i></i>Option 1</a></li>
        <li><a href="#"><i></i>Option 2</a></li>
        <li><a href="#"><i></i>Option 3</a></li>
        <li><a href="#"><i></i>Option 4</a></li>
    </ul>
</div>

Then I use this javascript function to make it behave as a dropdown:

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;

    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      return false;
    });

    obj.opts.on('click',function(){
      obj.opts.show();
      $(this).hide();
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text(obj.val);
    });
  },
  getValue : function() {
    return this.val;
  },
  getIndex : function() {
    return this.index;
  }
}

$(function() {

  var dd = new DropDown( $('#dd') );

  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown').removeClass('active');
  });

});

What I want to achieve is to have the selected option disappear from the dropdown menu so that it does not look repetitive as it does now (selecting Option 1 does not remove it from the list) Can anyone suggest a way to do it without having to rebuild the javascript?

Thank you everyone

Here is jsfiddle

Answer 1

Working fiddle.

You could hide the clicked option using hide() method :

$(obj.opts[0]).hide();
obj.opts.on('click',function(){
    obj.opts.show(); //Show all
    $(this).hide(); //Hide the clicked one

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
});

Hope this helps.

---

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;

    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      return false;
    });

    $(obj.opts[0]).hide();
    obj.opts.on('click',function(){
      obj.opts.show();
      $(this).hide();
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text(obj.val);
    });
  },
  getValue : function() {
    return this.val;
  },
  getIndex : function() {
    return this.index;
  }
}

$(function() {

  var dd = new DropDown( $('#dd') );

  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown').removeClass('active');
  });

});

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

::selection {
  background: transparent; 
}

::-moz-selection {
  background: transparent; 
}

.wrapper-demo {
  margin: 60px 0 0 0;
  *zoom: 1;
  font-weight: 400;
}

.wrapper-demo:after {
  clear: both;
  content: "";
  display: table;
}
.wrapper-dropdown {
  /* Size and position */
  position: relative;
  width: 200px;
  margin: 0 auto;
  padding: 10px;

  /* Styles */
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  outline: none;

  /* Font settings */
  font-weight: bold;
  color: #8AA8BD;
}

.wrapper-dropdown:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #8aa8bd transparent;
}

.wrapper-dropdown .dropdown {
  /* Size & position */
  position: absolute;
  top: 102%;
  left: -1px;
  right: -1px;

  /* Styles */
  background: white;
  border-radius: 0 0 7px 7px;
  border-top: none;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 1px solid blue;
  font-weight: normal;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -ms-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  list-style: none;

  /* Hiding */
  opacity: 0;
  pointer-events: none;
}

.wrapper-dropdown .dropdown li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #8aa8bd;
  border-bottom: 1px solid #e6e8ea;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.wrapper-dropdown .dropdown li i {
  float: right;
  color: inherit;
}

.wrapper-dropdown .dropdown li:first-of-type a {
  border-radius: 7px 7px 0 0;
}

.wrapper-dropdown .dropdown li:last-of-type a {
  border: none;
  border-radius: 0 0 7px 7px;
}

/* Hover state */

.wrapper-dropdown .dropdown li:hover a {
  background: #f3f8f8;
}

/* Active state */

.wrapper-dropdown.active {
  border-radius: 7px 7px 0 0;
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown.active .dropdown {
  opacity: 1;
  pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown .dropdown,
.no-pointerevents .wrapper-dropdown .dropdown {
  display: none;
  opacity: 1; /* If opacity support but no pointer-events support */
  pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown.active .dropdown,
.no-pointerevents .wrapper-dropdown.active .dropdown {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1">
  <span>Default Option</span>
  <ul class="dropdown">
    <li><a href="#"><i></i>Default Option</a></li>
    <li><a href="#"><i></i>Option 1</a></li>
    <li><a href="#"><i></i>Option 2</a></li>
    <li><a href="#"><i></i>Option 3</a></li>
    <li><a href="#"><i></i>Option 4</a></li>
  </ul>
</div>