Javascript: removeChild при определенном размере экрана

Я пытаюсь найти несколько часов, чтобы добавить обертку вокруг двух div (в сторону и .related) на определенном экране (> 60em и < 90em). Я делаю это с matchMedia и eventListener. Обертка, кажется, добавлена в нужное место, но проблема в том, что она все еще существует, даже когда условие размера не выполняется.Javascript: removeChild при определенном размере экрана

Вот jsfiddle: http://jsfiddle.net/Vanilla__/4q26ngmg/1/

Упрощенная 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')); 

    }); 
}

Я хотел добавить 'еще', чтобы удалить ребенка (с RemoveChild) или удалите eventListener (с помощью removeEventListener), когда есть другой размер экрана, но все, что я получаю, это ошибки, связанные с тем, что функция не определена или какие-либо другие ошибки, которые я пытаюсь сделать.

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

Кто-нибудь знает, как обертка может быть удалена, если не Размер экрана> 60em и < 90em? Я новичок в Javascript (как может быть ясно;)). Любая помощь приветствуется.

источник

2015-10-24 Vanilla__

Я предпочитаю использовать медиа-запросы, чтобы скрыть/показать элемент на некотором разрешении – Tushar

Проблема заключается в том, что я не могу редактировать HTML, поэтому я должен добавить оболочку динамически. –

Вы могли бы сделать что-то вроде этого:

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>

источник

2015-10-24 14:02:48

Большое вам спасибо! Не могу поблагодарить вас достаточно :) –

Javascript: removeChild при определенном размере экрана

ответ

Смежные вопросы