JavaScript-从匹配的img标题中删除Class - JavaScript - removeClass from matching img title?

我正在制作新的问题线索，因为我不清楚，我同意这一点。

所以，我有可点击的item-cards，如果你点击其中一个，类名会变为selected，它还会将你点击的项目添加到cart。每个购物车项目后面都有X，如果你点击它，它会从购物车中删除该项目，但不会删除selected部分。如果我在那里添加它将删除该类，那么它将从所有项目中删除它。例如，如果我在购物车中添加了两个项目，并从购物车中删除了一个项目，那么它会从所有项目中删除selected类，但我怎么能让它只从具有相同img标题的项目中删除它呢？以下是一些例子：

所选项目HTML

<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
    <div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
    <div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
    <div class="center-align" style="padding:6%">
        <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
        <div class="" 'floatvalue'="">Float: 0.11503319442272186
            <div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
            <div class="buyer-price center-align">$149.58</div>
        </div>
    </div>
</div>

代码，如果你点击X

$("#itemcart span").click(function() {
        $(this).parent().remove()

编码如何添加X

$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});

点击商品卡

 $(".item-card").click(function() {
       var itemnume = $(this).find("img").attr("title");
       var replaced = itemnume.split(' ').join('_');
       replaced = replaced.split('(').join('');
       replaced = replaced.split(')').join('');
       replaced = replaced.split('|').join('');
       if ($(this).hasClass('selected-item')) {
           $("#" + replaced).last().remove();
       } else {
        $("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
        $("#itemcart div").each(function(){
        if( $(this).children().length > 0){
        } else{
        $(this).append($("<span> X</span>"));
        }
        });
        $("#itemcart span").click(function() {
            $(this).parent().remove()
            $(".item-card").removeClass("red lighten-1 white-text selected-item");
            calculateTotal();
        });
       }
       $(this).toggleClass("red lighten-1 white-text selected-item");
       calculateTotal();
   });

试试这个，将所选项目保存在数据中，点击即可获得：

$(".item-card").click(function() {
   var itemnume = $(this).find("img").attr("title");
   var replaced = itemnume.split(' ').join('_');
   replaced = replaced.split('(').join('');
   replaced = replaced.split(')').join('');
   replaced = replaced.split('|').join('');
   if ($(this).hasClass('selected-item')) {
       $("#" + replaced).last().remove();
   } else {
    var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
    $("#itemcart").append(cart_item);
    $("#itemcart div").each(function(){
    if( $(this).children().length > 0){
    } else{
    $(this).append($("<span> X</span>"));
    }
    });
    var self = $(this);
    cart_item.on('click', 'span', function() {
        $(this).parent().remove()
        self.removeClass("red lighten-1 white-text selected-item");
        calculateTotal();
    });
   }
   $(this).toggleClass("red lighten-1 white-text selected-item");
   calculateTotal();
});

这里有一个正在运行的带有伪条目的片段。您必须使标识符适应您的动态代码。

委派侦听<ul>元素的事件。听点击<ul><li><div><span>元素并向上移除<li> 2父元素。

<html>
  <body>
    <ul class="item-store">
      <li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
          <div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
              <div class="iteam" style="text-decoration: underline;text-align: left">
                  Butterfly Knife | Crimson Web
              </div>
              <div class="condition" style="text-align: left;text-size:13px">
                  Field Tested
              </div>
              <div class="center-align" style="padding:6%">
                  <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
                  <div class="" 'floatvalue'="">
                      Float: 0.11503319442272186
                      <div class="bitskinscomp" style="font-weight: normal;font-size:12px">
                          BitSkins Price: $110.52 (You save: $-39.06)
                      </div>
                      <div class="buyer-price center-align">
                          $149.58
                      </div>
                  </div>
              </div>
          </div>
      </li>
      <li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
          <div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
              <div class="iteam" style="text-decoration: underline;text-align: left">
                  Butterfly Knife | Crimson Web
              </div>
              <div class="condition" style="text-align: left;text-size:13px">
                  Field Tested
              </div>
              <div class="center-align" style="padding:6%">
                  <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
                  <div class="" 'floatvalue'="">
                      Float: 0.11503319442272186
                      <div class="bitskinscomp" style="font-weight: normal;font-size:12px">
                          BitSkins Price: $110.52 (You save: $-39.06)
                      </div>
                      <div class="buyer-price center-align">
                          $149.58
                      </div>
                  </div>
              </div>
          </div>
      </li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script>
//Code, if you click on X
$(".item-store").on('click', '.item-card span', (function() {
  $(this).parent().parent().remove();
}));
//Code how X is being added
//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
  if( $(this).children().length > 0){
    $(this).append($("<span> x</span>"));
  } else{
    $(this).append($("<span> X</span>"));
  }
});
    </script>
  </body>
</html>