How to remove all <link> tags between two <meta> tags using Javascript (not Jquery)?

Issue

This is how certain external css files are placed between two meta tags.

<meta id="front-template-css-anchor-start" name="front-template-css-anchor-start" content="This is where front template css will be added"/>
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/LineIcons.2.0.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/animate.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/tiny-slider.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/glightbox.min.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/main.css" />
<meta id="front-template-css-anchor-end" name="front-template-css-anchor-end" content="This is where front template css will be added"/>

In my js code, I tried to get the two meta tags like this:-

var frontTemplateCssAnchorStart       = document.querySelector('#front-template-css-anchor-start');
var frontTemplateCssAnchorEnd         = document.querySelector('#front-template-css-anchor-end');

This code,

frontTemplateCssAnchorEnd.previousElementSibling.remove();

removes <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/main.css" /> from the DOM. But I want to iterate from frontTemplateCssAnchorStart to frontTemplateCssAnchorEnd and delete/remove all <link> tags. But I am stuck and don't know how to proceed from here.

How can I solve this?

Solution

You can iterate through the nextElementSiblings until the end element is reached.

for (let curr = frontTemplateCssAnchorStart.nextElementSibling, next; 
        curr && curr != frontTemplateCssAnchorEnd; curr = next) {
    next = curr.nextElementSibling;
    if (curr.matches('link')) curr.remove();
}

Answered By - Unmitigated