Javascript: removeChild at certain screen size

Question

I'm trying for hours now to add a wrapper around two divs (aside and .related) at a certain screensize (>60em and <90em). I'm doing this with matchMedia and an eventListener. The wrapper seems to be added at the right spot, but the problem is that it's still there even when the condition of the size is not met.

Here is a jsfiddle: http://jsfiddle.net/Vanilla__/4q26ngmg/1/

Simplified HTML:

<body>
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <div class="related">Related</div>
  <footer>Footer</footer>
</body>

Javascript:

if(window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {

  window.addEventListener("resize", function addWrapper(q) {

  //Create div with id wrapper
  var div = document.createElement('div');
  div.id = "wrapper";

  // Select aside
  var selectDiv = document.querySelector("aside");

  //clone
  div.appendChild(selectDiv.cloneNode(true));
  //Place the new wrapper at the right place in the HTML
   selectDiv.parentNode.replaceChild(div, selectDiv);

  //Add related to the wrapper so they're both in the wrapper
  document.querySelector('#wrapper').appendChild(
    document.querySelector('.related') );

  });
}

I wanted to add an 'else' to remove the child (with removeChild) or delete the eventListener (with removeEventListener) when there's another screen size, but all I get is errors about that the function is not definied or other errors whatever I try.

else {
       window.removeEventListener("resize", addWrapper(q));
    }

Does anyone know how the wrapper can be removed when the screensize is not >60em and <90em? I'm a Javascript rookie (as might be clear ;) ). Any help is appreciated.

I'd rather use media queries to hide/show the element on some resolution — Tushar, Oct 24 '15 at 12:56
The problem is that I can't edit the HTML, so I have to add the wrapper dynamically. — Vanilla__, Oct 24 '15 at 12:57

score 1 · Accepted Answer · answered Oct 24 '15 at 14:02

You could do something like this:

var addWrapper = function () {

    //Don't add wrapper if already added
    var wrapper = document.getElementById("wrapper");
    if (wrapper !== null) return;

    //Create div with id wrapper
    var div = document.createElement('div');
    div.id = "wrapper";

    // Select aside
    var selectDiv = document.querySelector("aside");

    //clone
    div.appendChild(selectDiv.cloneNode(true));
    //Place the new wrapper at the right place in the HTML
    selectDiv.parentNode.replaceChild(div, selectDiv);

    //Add related to the wrapper so they're both in the wrapper
    document.querySelector('#wrapper').appendChild(
    document.querySelector('.related'));
};

var removeWrapper = function () {
    //Don't remove if there is no wrapper
    var wrapper = document.getElementById("wrapper");
    if (wrapper === null) return;

    //Replace wrapper with its content
    wrapper.outerHTML = wrapper.innerHTML;
}

var wrapperFixer = function () {
    if (window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {
        addWrapper();
    } else {
        removeWrapper();
    }
}

window.onload = function () {
    window.addEventListener("resize", wrapperFixer);
    //Check and add if wrapper should be added on load
    wrapperFixer();
}

body {
    display: flex;
    height: 40em;
    flex-wrap: wrap;
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    text-align: center;
}
header {
    background-color: purple;
    width: 30%
}
main {
    background-color: pink;
    width: 40%
}
aside {
    background-color: deepPink;
    width: 15%
}
.related {
    background-color: red;
    width: 15%
}
footer {
    background-color: slateBlue;
    width: 100%;
    height: 5em;
}
#wrapper {
    border: 4px solid white;
}

<body>
    <header>Header</header>
    <main>Main</main>
    <aside>Aside</aside>
    <div class="related">Related</div>
    <footer>Footer</footer>
</body>

Javascript: removeChild at certain screen size

1 Answers1