Remove items from customer cart when a product offer ends - shopify

Question

I'm not a developer, I started coding for fun a couple of weeks ago, so please be patient with me :)
I'm trying to customise something in my shopify shop (dawn theme).
I am creating some limited time products offers with a countdown timer in the product page.
When the timer hits 0, the add to cart button in the product page is removed, and the item can't be added to the cart anymore.
I found this countdown timer online and edited it to my needs. Once the time ends, the timer disappears and it's replaced by some text.
The code of the countdown timer is the following:
{% assign nowDateSec = 'now' | date: '%s' %}
{% assign modDateSec = countdown_timer_date | date: '%s' %}
{% if nowDateSec > modDateSec %}
<center>
<b
style="
font-size: x-large;
color: red;
"
>
The offer has ended.</b
>
</center>
{% else %}
{% if end_date != blank %}
<div class="timer">
{% if title != blank %}
<h4 class="timer__title">{{ title }}</h4>
{% endif %}
<div class="timer-display">
<div class="timer-block">
<span class="timer-block__num js-timer-days">00</span>
<span class="timer-block__unit">Giorni</span>
</div>
<div class="timer-block">
<span class="timer-block__num js-timer-hours">00</span>
<span class="timer-block__unit">Ore</span>
</div>
<div class="timer-block">
<span class="timer-block__num js-timer-minutes">00</span>
<span class="timer-block__unit">Minuti</span>
</div>
<div class="timer-block">
<span class="timer-block__num js-timer-seconds">00</span>
<span class="timer-block__unit">Secondi</span>
</div>
</div>
</div>
{% endif %}
<style>
/* styles for timer */
.timer {
font-size: x-large;
background: #FFFFFF;
padding: 5px;
margin: 5px 0;
}
.timer--expired {
display: none;
}
.timer__title {
#extend .paragraph;
text-align: center;
font-size: large;
}
.timer-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5px;
}
.timer-block {
position: relative;
width: 25%;
padding: 0 10px;
&:not(:last-child):after {
content: ':';
position: absolute;
right: 0;
top: 3px;
}
}
.timer-block__num,
.timer-block__unit {
display: block;
text-align: center;
}
</style>
<script type="text/javascript">
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
var countDown = new Date('{{- end_date -}}').getTime(),
x = setInterval(function() {
var now = new Date().getTime(),
distance = countDown - now;
document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);
}, second)
</script>
{% endif %}
I have included the timer in my product page just below the add to cart button using the below code:
{% assign countdown_timer_boolean = product.metafields.custom.countdown_timer %}
{% assign countdown_timer_date = product.metafields.custom.countdown_timer_date %}
{% if countdown_timer_boolean == true %}
{% include 'shopify-countdown-timer',
title: "The offer will end in:",
end_date: countdown_timer_date
%}
{% endif %}
"countdown_timer_boolean" and "countdown_timer_date" are two metafields I have created for the product: the first one is a simple boolean to select which products will be on limited offer and which ones are regular, with the second I can set the date when the offer ends.
(I am sure there are multiple better solution for this, but again I'm a total novice and it's working, so I'm quite happy like this.)
The problem is that the product can still be bought by the customer if it has been added to the cart before the end of the offer, as it stays there up to 10 days.
I tried to play with the code in order to automatically delete the items in the cart when the offer has ended, but with no success. I've spent the last 3 days trying, and I've run out of ideas on how to do this.
I tried to set the item quantity of the product in the cart to 0 when the timer ends, but nothing happens. The quantity stays the same.
I tried to change the max quantity of the item to 0 but, like in the example above, it doesn't work.
Unfortunately I deleted the code because it didn't work, but it looked something like this:
{% assign nowDateSec = 'now' | date: '%s' %}
{% assign modDateSec = countdown_timer_date | date: '%s' %}
{% assign countdown_timer_boolean = product.metafields.custom.countdown_timer %}
{% if nowDateSec > modDateSec and countdown_timer_boolean == true %}
{% assign item.quantity = 0 %}
{% else %}
........rest of the code.......
{% endif %}
Has anyone got any clue how I could achieve this or point me in the right direction?
To be clear, I don't want anyone to do the work for me, I'll be happy with some advice.
Edit.
Following the comment from David, and having looked more into the Ajax API, that's what I need to use in order to solve my problem. I will keep reading more about it and I'll update my post if I find a solution. Still, if you have any advice, it's always appreciated.
Andrea