KenSalter

Ok last post, here is the final version of my code, where it ghosts the item and changes the link:
<script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script>  

Nice job!
You can use jQuery if you want.
Add the following to Settings > Advanced > Code Injection > HEADER.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Yes the downside to this technique is that it can leave holes in the grid.  For v7.1 sites the hidden items should only be noticed at the end of the grid as it is using display : grid. On v7.0 floats seem to be the preferred method for making grids, which is trickier to deal with.

Ok last post, here is the final version of my code, where it ghosts the item and changes the link:
<script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script>  

Ok last post, here is the final version of my code, where it ghosts the item and changes the link:
<script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script>  

You might be able to use tags and some Javascript to hide products.
You could do something like expire MMDDYY for a tag. Then Javascript would scan for tags beginning with expire and check the current date against the date parsed from the tag. If the current date is greater than the tag date then hide the product.
The other approach might work as well. The tag would be date MMDDYY. The code would check to see if the current date is n number of days after the tag date. If so, hide the product.
Would something like these work for your needs?