Remove specific products from cart on change in shopify

Question

Im trying to make a specific feature. the concept of this feature is to check in the cart whether there is a product holding a data-collection attribute = tier-1 ... tier-5

Only in this scenario, the script will fire.

So for example, if i have 100 product in the cart, no product has this data attribute == tier-1 ... tier-5 , then nothing will happen.

once i have 1 product at least having this attribute, the script will fire.

what i want to do is:

1. check if data attribute exist.

2. if exist, then i want to make that everytime a customer lower the quantity (using the input or button - ), or remove any product from the cart, to remove all the product that have the data-attribute = tier-1, tier-2 ... tier-5.

3. refresh and update the cart.

in my code i added clear.js. the script worked fine to me and fires when the product with data-collection exists, but this removes all the product from the whole cart.

the code i wrote:

$(document).ready(function() { 
    // Flag to check if tier-1 to tier-5 product exists
    var hasTierProduct = false;

    // Iterate over the cart items
    $('.media-link').each(function() {
      var collection = $(this).attr('data-collection').trim().toLowerCase();
      
      // Check if the data-collection attribute contains 'tier-'
      if (collection.includes('tier-')) {
        var tier = parseInt(collection.split('tier-')[1]);
        
        // Check if the tier is within the range of 1 to 5
        if (tier >= 1 && tier <= 5) {
          hasTierProduct = true; // Set flag to true if tier product found
        }
      }
    });
  $(document).on("click change", ".sd_mini_removeproduct, .quantity-button.quantity-down, .ajaxcart__qty-num", function (evt) {
  if (hasTierProduct) {
    $.ajax({
      url: "/cart/clear.js",
      method: "POST",
      success: function() {
        console.log('Cart cleared');
        // Reload the page or update cart contents as needed
        location.reload();
      }
    });
  }
});

});

i tired to use in the AJAX update.js and change.js the script fires but does not remove the products.

$(document).ready(function() {
    $(document).on("click change", ".quantity-button.quantity-down, .ajaxcart__qty-num", function (evt) {
        evt.preventDefault(); // Prevent default action of quantity buttons
        
        // Remove products with data-collection containing 'tier-'
        removeTierProductsFromCart();
    });
    
    $(document).on("click", ".sd_mini_removeproduct", function (evt) {
        evt.preventDefault(); // Prevent default action of remove product button
        
        // Remove products with data-collection containing 'tier-'
        removeTierProductsFromCart();
    });

    function removeTierProductsFromCart() {
        var hasTierProduct = false;

        // Iterate over the cart items
        $('.media-link').each(function() {
            var collection = $(this).attr('data-collection').trim().toLowerCase();
            
            // Check if the data-collection attribute contains 'tier-'
            if (collection.includes('tier-')) {
                var tier = parseInt(collection.split('tier-')[1]);
                
                // Check if the tier is within the range of 1 to 5
                if (tier >= 1 && tier <= 5) {
                    hasTierProduct = true; // Set flag to true if tier product found
                    // Remove this product from the cart
                    var itemId = $(this).attr('data-id');
                    $.ajax({
                        url: '/cart/update.js',
                        method: 'POST',
                        data: {
                            updates: {
                                [itemId]: 0 // Set quantity of this item to 0
                            }
                        },
                        success: function() {
                            console.log('Tier product removed from cart');
                            // Reload the page or update cart contents as needed
                            location.reload();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error removing tier product from cart:', textStatus, errorThrown);
                        }
                    });
                }
            }
        });

        if (!hasTierProduct) {
            console.log('No tier product found in cart');
        }
    }
});

This is an exmple of having 3 products in cart: enter image description here

so whenever i remove any product from these, all tier-1 ... tier-5 should be removed