如果选中,则隐藏或移除列表中的值

时间:2018-04-05 02:17:49

标签: javascript jquery html css

我有一个无序列表,如果选中它,我想删除列表选项。

例如

如果用户选择其中一个列表选项,我想从列表中删除该选项,因为它将被视为所选值。我可以使用jquery或CSS来实现这一点吗?任何人都可以帮助我吗?

它已被删除

但问题是假设用户选择" A",值" A"从列表中删除但是再次当用户选择" B"时,如何添加值" A"回到列表中

以下是我的html文件:



<dl id='assettypes' class="dropdown">
  <dt>
  <a href="#">
     <span>
        Select option
     </span>                                              
   </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

您希望将click事件处理程序附加到每个 <li> 元素。在那里,您只需使用 $(this) 来定位点击的元素,然后 .hide() 隐藏它:

&#13;
&#13;
$('#ggg > li').click(function() {
  $(this).hide();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<dl id='assettypes' class="dropdown">
  <dt>
  <a href="#">
     <span>
        Select option
     </span>                                              
   </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>
&#13;
&#13;
&#13;