How to delete just the parent Element in DOM using cheerios

Question

Following is the file structure

<ABCList>
<ABC>
    <RL>3166</RL>
    <Client>[email protected]</Client>
<TravelerList>
        <Traveler>
            <FirstName>abc</FirstName>
            <LastName>zyz</LastName>
            <EmailAddress>[email protected]</EmailAddress>
            <PhoneNumber>5145845</PhoneNumber>
        </Traveler>
    </TravelerList>
</ABC>
</ABCList>

I want to to remove just from the file structure and keep the rest as it is. Following is what i have tried and it is removing just to parent element but it removes parent and child.

$("ABCList").remove()

Answer 1

I think you're looking for unwrap:

const cheerio = require("cheerio"); // ^1.0.0-rc.12

const html = `<ABCList>
<ABC>
    <RL>3166</RL>
    <Client>[email protected]</Client>
<TravelerList>
        <Traveler>
            <FirstName>abc</FirstName>
            <LastName>zyz</LastName>
            <EmailAddress>[email protected]</EmailAddress>
            <PhoneNumber>5145845</PhoneNumber>
        </Traveler>
    </TravelerList>
</ABC>
</ABCList>`;

const $ = cheerio.load(html, {xml: true});
$("ABCList ABC").unwrap();
console.log($.html());

Output:

<ABC>
    <RL>3166</RL>
    <Client>[email protected]</Client>
<TravelerList>
        <Traveler>
            <FirstName>abc</FirstName>
            <LastName>zyz</LastName>
            <EmailAddress>[email protected]</EmailAddress>
            <PhoneNumber>5145845</PhoneNumber>
        </Traveler>
    </TravelerList>
</ABC>

This is in my Cheerio Cheatsheet: "Lift children up to a parent".

It's less optimal, but $("ABCList").replaceWith($("ABCList").html()); is also possible.

Since Cheerio shares most of its API with jQuery, see also remove parent element but keep the child element using jquery in HTML.