title: Remove and add data attributes on navigation
body: <p>I wanted to create a Bootstrap carousel on my website with a custom navigation. So I changed the indicators to three blocks with some text and an button in it.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;ul class="slide-nav"&gt;
          &lt;li data-target="#carousel" data-slide-to="0" class="col-sm-4 slide-first"&gt;
              &lt;div class="nav-element"&gt;
                  &lt;i class="fa fa-star symbol-big"&gt;&lt;/i&gt;
                  &lt;h3&gt;Leistungen&lt;/h3&gt;
                  &lt;a href="#" class="btn btn-primary btn-block"&gt;Mehr erfahren&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li data-target="#carousel" data-slide-to="1" class="col-sm-4 slide-middle active"&gt;
               &lt;div class="nav-element"&gt;
                  &lt;i class="fa fa-thumbs-up symbol-big"&gt;&lt;/i&gt;
                  &lt;h3&gt;Ihre Vorteile&lt;/h3&gt;
                  &lt;a href="#" class="btn btn-primary"&gt;Mehr erfahren&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li data-target="#carousel" data-slide-to="2" class="col-sm-4 slide-last"&gt;
               &lt;div class="nav-element"&gt;
                  &lt;i class="fa fa-users symbol-big"&gt;&lt;/i&gt;
                  &lt;h3&gt;Unser Team&lt;/h3&gt;
                  &lt;a href="#" class="btn btn-primaryk"&gt;Mehr erfahren&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The navigation works just fine but when I want to click on a button to access the link it wont work because of the "data-target". If i remove it i can click on the link.</p>
  
  <p>Now I wanted to achieve that when I click on an "li" element with an active class, the "data-attribute" will be removed and when I click on an other it will be added again.</p>
  
  <p>Or is there an even nicer method?</p>