0

my code is including the label text in a span tag, what I am trying to do is: remove the span tag when I click in each span.

sample I added test1 and test2, so in Refined by: if I click in each label test1 remove that label test1 or if I click in test2 remove the label test2.

someone can help me with that, I am not understanding what I am doing wrong.

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
  $("span").bind("click", function() {
    alert("The quick brown fox jumps over the lazy dog.");
    $(span).remove();
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

Improve this question
3
  • You just want to remove label or the <li> itself ? Commented Sep 18, 2017 at 10:41
  • Do you have your span saved into a variable? as you just have the word 'span' written with no reference Commented Sep 18, 2017 at 10:41
  • I want remove the whole span: <span class="label label-primary" selected-item="item1_selected">test1</span> Commented Sep 18, 2017 at 10:42

3 Answers 3

Reset to default
2

You can do like this:

$('#selected_items').on('click', '.label-primary', function(){
    $(this).remove();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks for the help, but did not work: I want remove this after click in the tag: <span class="label label-primary" selected-item="item1_selected">test1</span>
yes very good, it is what I am looking for, but I need uncheck the checkbox too after remove understand? I need be able to include this again.
Can you accept this answer as it the answer to your post ?
@Raduken - Well, you can take a look at my answer below. it removes as well as unchecks.
1 

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
  $("span").bind("click", function() {
    alert("The quick brown fox jumps over the lazy dog.");
    $(this).remove();
    var selectedText = $(this).attr('selected-item');
    selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

Improve this answer

Comments

0

You need to added click event for particular spam element:

  //Assign click to current checked input sibling span
  $(this).parent().find("span").bind("click", function() {
    alert("The quick brown fox jumps over the lazy dog.");
    //Remove current li clicked span with this
    $(this).parent().remove();
  });


var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
  $(this).parent().find("span").bind("click", function() {
    alert("The quick brown fox jumps over the lazy dog.");
    $(this).parent().remove();
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.