Delete HTML element in Chrome DevTools without deleting its children?

Question

I'm tinkering around using Chrome DevTools on someone's site to clean up their code and make things look the way they've requested.

So far I've been unable to delete an HTML element without also deleting its child elements (I right click on the <div> I want to delete and click 'delete element' - but this also removes all child element inside it).

However, I only want to remove the outer <div> wrapping because it's redundant and unnecessary (the code is a mess with divs inside of divs inside of divs for no reason). When I double click on the <div> and use the delete key to erase it, I'm unable to remove the outer carrots and when I click back out, the <div> reappears.

I'm almost sure I'm missing a simple step - can someone point me in the right direction?

Answer 1

Right-click on the div you want to remove and choose 'edit as html'. Remove the lines you don't want and then click outside the editable area to close it.

Answer 2

Right-click the element, choose Edit as HTML, delete the start and end tags, and save. That should move the child elements out of it and into its parent automatically. Deleting the element will always also delete its children; double-clicking it only lets you edit its tag name and not its entire markup.