如何在香草JS DOM操作中获取DRY代码

Question

我正在使用天气应用程序，但是在使代码变干时遇到了一些麻烦。当我使用许多DOM方法时就会发生这种情况。这是一些代码：

if(document.querySelector('.container').contains(document.querySelector('.results__container')) 
    && document.querySelector('.container').contains(document.querySelector('.results__weather--temperature'))
    && document.querySelector('.container').contains(document.querySelector('.city__name')))
{
    document.querySelector('.container').removeChild(document.querySelector('.results__container'));
    document.querySelector('.container').removeChild(document.querySelector('.results__weather--temperature'));
    document.querySelector('.container').removeChild(document.querySelector('.city__name'));
}

这里还有更多：

if(weather.main === 'Haze' || weather.main === 'Mist' || weather.main === 'Smoke')
{
    //remove css of previous city's weather
    document.querySelector('.container').className = 'container';
    document.querySelector('.mist__container--outer').classList.remove('appear');
    document.querySelector('.cloud__container').classList.remove('appear');/
    document.querySelector('.sun').classList.remove('appear');

    //add css of new city's weather
    document.querySelector('.container').classList.add('background__mist');
    document.querySelector('.mist__container--outer').classList.add('appear');
}

Answer 1

检索在多个位置使用的DOM元素，并将它们存储在变量中，以供以后参考：

let c = document.querySelector('.container')
let rc = document.querySelector('.results__container')
let wt = document.querySelector('.results__weather--temperature')
let cn = document.querySelector('.city__name')

if(c.contains(rc) 
    && c.contains(wt)
    && c.contains(cn))
{
    c.removeChild(rc);
    c.removeChild(wt);
    c.removeChild(cn);
}