Remove Perticulur Appended data Using Jquery

98
February 27, 2018, at 7:53 PM

Let Suppose I Have A query As Below

$(".categoryCB").change(function(){ 
 
        if($(this).prop("checked") == true){ 
          var currentVal = $(this).val(); 
          $("#SqlQuerySpan2").append(" AND Category = " + currentVal); 
        } 
        else if($(this).prop("checked") == false) 
        { 
          $("#SqlQuerySpan2").text(""); 
        } 
 
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<b>Search By Top Category</b></p> 
<input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees 
<input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees 
<input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees 
<input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees 
                           
<br><hr> 
 
<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

Code Works Fine. But Problem is I am using jquery append So it will append data as i checks the checkbox but when i uncheck checkbox i wants to remove only perticulur data that are belongs with.

So How Can I Solve it..!

Answer 1

One way of doing it is by replacing the value like this

$(".categoryCB").change(function(){ 
 
        if($(this).prop("checked")){ 
          var currentVal = $(this).val(); 
          $("#SqlQuerySpan2").append(" AND Category = " + currentVal); 
        } 
        else 
        { 
         var currentVal = $(this).val(); 
          var str = $("#SqlQuerySpan2").text(); 
          str = str.replace(" AND Category = " + currentVal,""); 
          $("#SqlQuerySpan2").text(str); 
        } 
 
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p><b>Search By Top Category</b></p> 
                          <p><input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees</p> 
                          <p><input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees</p> 
                          <p><input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees</p> 
                          <p><input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees</p> 
                           
<br><hr> 
 
<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

P.S if($(this).prop("checked") == true) can become if($(this).prop("checked")). This will return true, you don't have to compare with true and else if(...) can become else

Answer 2

Simple and Easy :- Just change the else condition. Replace the unselected checkbox's value with blank.

$(".categoryCB").change(function(){ 
  if($(this).prop("checked")) 
    $("#SqlQuerySpan2").append(" AND Category = " + $(this).val()); 
  else 
    $("#SqlQuerySpan2").text($("#SqlQuerySpan2").html().replace(" AND Category = " + $(this).val(), "")); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<b>Search By Top Category</b></p> 
<input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees 
<input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees 
<input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees 
<input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees 
<br><hr> 
<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

Answer 3

You could use map method to create array from all input values and then join method to get string from that array.

$(".categoryCB").change(function() { 
  let text = $('.categoryCB') 
    .map(function() { 
      return $(this).is(':checked') && $(this).val() 
    }).get().filter(e => e).join(" AND Category = ") 
   
  text = text.length ? " AND Category = " + text : '' 
  $('#SqlQuerySpan2').text(text) 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p><b>Search By Top Category</b></p> 
<p><input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees</p> 
<p><input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees</p> 
<p><input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees</p> 
<p><input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees</p> 
 
<br> 
<hr> 
 
<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

READ ALSO
jQuery form submit Scroll to particular error message div

jQuery form submit Scroll to particular error message div

Form is long after submit if validation error scroll to first error message div on form submit

124
Authentication &amp; logins - Bootstrap - Tabs

Authentication & logins - Bootstrap - Tabs

This is mostly regarding security but also regarding advice on the best method:

80
Trying to load jQuery plugin via npm

Trying to load jQuery plugin via npm

I'm trying to load a jquery plugin in vuejs but nothing seems to be doing the trick

120
Dynamic creation of list and adding HTML Tags in the each newly created element

Dynamic creation of list and adding HTML Tags in the each newly created element

I am using gridster for one of my project and my main aim is to create the widgets dynamicallyThe number of widgets I need to create will come from backend(Django)

76