Question: Delete HTML element in Chrome DevTools without deleting its children?

Question

Delete HTML element in Chrome DevTools without deleting its children?

Answers 2
Added at 2016-12-26 04:12
Tags
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 un necessary (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?

Answers
nr: #1 dodano: 2016-12-26 04:12

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.

nr: #2 dodano: 2016-12-26 04:12

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.

Source Show
◀ Wstecz