Ensure remove buton updates

assets/quick-order-list.css

@@ -196,7 +196,7 @@ quick-order-list .quantity__button {
   color: rgb(var(--color-foreground));
 }
 
-quick-order-list-remove-button {
+.variant-item__remove{
   display: flex;
   margin: 0 0 0 1.2rem;
   align-self: center;

assets/quick-order-list.js

@@ -262,42 +262,46 @@ if (!customElements.get('quick-order-list')) {
 
       renderSections(parsedState, ids) {
         const intersection = this.queue.filter(element => ids.includes(element.id));
-        if (intersection.length === 0) {
-          this.getSectionsToRender().forEach((section) => {
-            const sectionElement = document.getElementById(section.id);
-            if (
-              sectionElement &&
-              sectionElement.parentElement &&
-              sectionElement.parentElement.classList.contains('drawer')
-            ) {
-              parsedState.items.length > 0
-                ? sectionElement.parentElement.classList.remove('is-empty')
-                : sectionElement.parentElement.classList.add('is-empty');
-              setTimeout(() => {
-                document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart));
-              });
-            }
-            const elementToReplace =
-              sectionElement && sectionElement.querySelector(section.selector)
-                ? sectionElement.querySelector(section.selector)
-                : sectionElement;
-            if (elementToReplace) {
-                if (section.selector === `#${this.quickOrderListId} .js-contents` && ids !== undefined) {
-                ids.forEach((i) => {
+        this.getSectionsToRender().forEach((section) => {
+          const sectionElement = document.getElementById(section.id);
+          if (
+            sectionElement &&
+            sectionElement.parentElement &&
+            sectionElement.parentElement.classList.contains('drawer')
+          ) {
+            parsedState.items.length > 0
+              ? sectionElement.parentElement.classList.remove('is-empty')
+              : sectionElement.parentElement.classList.add('is-empty');
+            setTimeout(() => {
+              document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart));
+            });
+          }
+          const elementToReplace =
+            sectionElement && sectionElement.querySelector(section.selector)
+              ? sectionElement.querySelector(section.selector)
+              : sectionElement;
+          if (elementToReplace) {
+              if (section.selector === `#${this.quickOrderListId} .js-contents` && ids !== undefined) {
+              ids.forEach((i) => {
+                if (intersection.length === 0) {
                   elementToReplace.querySelector(`#Variant-${i}`).innerHTML =
                   this.getSectionInnerHTML(parsedState.sections[section.section], `#Variant-${i}`);
-                });
-              } else {
-                elementToReplace.innerHTML = this.getSectionInnerHTML(
-                  parsedState.sections[section.section],
-                  section.selector
-                );
-              }
+                } else {
+                  elementToReplace.querySelector(`#Variant-${i} .variant-item__remove`).innerHTML =
+                  this.getSectionInnerHTML(parsedState.sections[section.section], `#Variant-${i} .variant-item__remove`);
+                }
+
+              });
+            } else {
+              elementToReplace.innerHTML = this.getSectionInnerHTML(
+                parsedState.sections[section.section],
+                section.selector
+              );
             }
-          });
-          this.defineInputsAndQuickOrderTable();
-          this.addMultipleDebounce();
-        }
+          }
+        });
+        this.defineInputsAndQuickOrderTable();
+        this.addMultipleDebounce();
       }
 
       getTableHead() {

snippets/quick-order-list-row.liquid

@@ -284,20 +284,22 @@
             {% render 'quantity-input', variant: variant, min: 0 %}
           {%- endif -%}
         </div>
-        {%- if cart_qty > 0 -%}
-          <quick-order-list-remove-button
-            id="Remove-{{ variant.id }}"
-            data-index="{{ variant.id }}"
-          >
-            <a
-              href="{{ item.url_to_remove }}"
-              class="button button--tertiary"
-              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
+        <div class="variant-item__remove">
+          {%- if cart_qty > 0 -%}
+            <quick-order-list-remove-button
+              id="Remove-{{ variant.id }}"
+              data-index="{{ variant.id }}"
             >
-              {% render 'icon-remove' %}
-            </a>
-          </quick-order-list-remove-button>
-        {%- endif -%}
+              <a
+                href="{{ item.url_to_remove }}"
+                class="button button--tertiary"
+                aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
+              >
+                {% render 'icon-remove' %}
+              </a>
+            </quick-order-list-remove-button>
+          {%- endif -%}
+        </div>
       </div>
       {%- if has_popover -%}
         <button