Removing an element on resize doesn't work (but adding does)

JavaScript
21

You missed out the important bit which was the event listener that listens for the media query breakpoint and you seem to be trying to insert the element into an svg instead of the header.

const mqls = window.matchMedia("(max-width: 850px)");
const hostElement = document.querySelector(".header-module--nav--7IzCJ");
const parasiteElement = `
    <div class="phoneNumberBox" dir="ltr" style="text-align: center; background: red;">
        <h2>Call me:</h2>
        <a tel:X>+1 012-3456780</a>
    </div>
`;

function mediaqueryresponse(mql) {
  if (mqls.matches) {
    hostElement.insertAdjacentHTML("afterend", parasiteElement);
  }
}

mediaqueryresponse(mqls);

// attach listener function to listen in on state changes
mqls.addEventListener("change", mediaqueryresponse);