How to get DRY code in vanilla JS DOM manipulation

Question

I'm working on a weather app and I'm having some trouble making my code DRY. It happens when I use a lot of DOM methods. Here is some code:

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'));
}

Here's some more:

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

Retrieve the DOM elements that you use in several places and store them in variables which you can refer to later:

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);
}

Same thing in your 2nd example (and also shorten the initial if()):

if(['Haze', 'Mist', 'Smoke'].includes(weather.main))
{
    let mco = document.querySelector('.mist__container--outer');
    //remove css of previous city's weather
    let c = document.querySelector('.container');

    c.className = 'container';
    mco.classList.remove('appear');
    document.querySelector('.cloud__container').classList.remove('appear');
    document.querySelector('.sun').classList.remove('appear');

    //add css of new city's weather
    c.classList.add('background__mist');
    mco.classList.add('appear');
}