javascript - 使用 Jquery 删除附加数据

Question

假设我有一个查询如下

$(".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>

代码运行良好。但问题是我正在使用 jquery append 因此，当我选中复选框时，它将附加数据，但是当我取消选中复选框时，我只想删除属于的特定数据。

那么我该如何解决它......!

Answer 1

一种方法是替换这样的值

$(".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) 可以变成 if($(this).prop("检查“))。这将返回 true，您不必与 true 进行比较，else if(...) 可以变成 else