Bootstrap dropdown clear content using Jquery

Question

How to clear content in dropdown menu of Boostrap. Here is what i have for now

  <div class="dropdown">
  <a href="#" id="1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
  <div class="dropdown-menu">
  </div>
  </div>


  <div class="dropdown">
  <a href="#" id="2" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
  <div class="dropdown-menu">
  </div>
  </div>

And Jquery

$("#1").click(function(){
$('.dropdown-menu').append( "<a href='#'>Action 1</a>" );});

$("#2").click(function(){
$('.dropdown-menu').append( "<a href='#'>Action 2</a>" );});

The problem is taht i need to clear that, thsi way i always get append, I is possbile to make it clear after putting content inside?

Here is working bootply

http://www.bootply.com/130101

Answer 1

You can remove contents inside .dropdown-menu using .remove():

$('.dropdown-menu').children().remove();