Remove any specific html code using javascript

Question

In the past I used Google Developer Console to delete some specific divs on a page. I could do it manually of course but in some cases where the divs where many I had to use the console. I had a single line code that did the job (I found it while searching the internet) but I lost my note.

So how can I delete using javascript any html code (by copy pasting the code).

Something like:

elements = $('<div ... </div>');
elements.remove();

OR

$('<div  ... </div>').remove();

Any ideas? I am not an expert in javascript (obviously) and I've been searching stackoverflow for hours without finding anything that works.

UPDATE : I think some people might get confused with my question. Google developer console accepts javascript command lines. So even though I ask for javascript I will use the code on the google developer console.

UPDATE 2 :

Here is an example of a div I need to delete. Keep in mind I want to copy paste the entire code in the javascript code. Not just identify the div.

<div class="entry-status-overlay" data-entry-status="declined">
            <div class="entry-status-overlay__inner">
                <span class="entry-status-overlay__title">Declined</span>
            </div>
        </div>

It's the data-entry-status="declined" that makes that div unique so I can't just identify the div using an id selector or a class selector. I need to put the entrire thing there and remove it.

I tried:

$('<div class="entry-status-overlay" data-entry-status="declined"><div class="entry-status-overlay__inner"><span class="entry-status-overlay__title">Declined</span></div></div>').remove();

It didn't remove the div.

Answer 1

You cannot do by simply pasting the code. That will remove all the div element.

You may need a specific selector like id , class or child to specific parent to remove the element from the dom.

Consider this case the divs have common class but the data-entry-status is different. So you can get the dom using a selector and then check the dataset property.

For demo I have put it inside setTimeout to show the difference. In application you can avoid it

 setTimeout(function() { document.querySelectorAll('.entry-status-overlay').forEach(function(item) { let getStatus = item.dataset.entryStatus; if (getStatus === 'declined') { item.remove() } }) }, 2000) 

 <div class="entry-status-overlay" data-entry-status="declined"> <div class="entry-status-overlay__inner"> <span class="entry-status-overlay__title">Declined</span> </div> </div> <div class="entry-status-overlay" data-entry-status="accepted"> <div class="entry-status-overlay__inner"> <span class="entry-status-overlay__title">accepted</span> </div> </div> 

Answer 2

Try to search the dom by its outerHTML.

function deleteDomByHtml(html){
    html=html.replace(/\s/g,'');
    $("*").each(function(){
       if(this.outerHTML.replace(/\s/g,'')===html){
           $(this).remove();
       }
    });
}

And try this line on this page:

deleteDomByHtml(`<span class="-img _glyph">Stack Overflow</span>`);

Answer 3

Just add any attribute with [] and it will remove the element.

 $('[class="entry-status-overlay"]').remove(); /*OR*/ $('[data-entry-status="declined"]').remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="entry-status-overlay" data-entry-status="declined"> <div class="entry-status-overlay__inner"> <span class="entry-status-overlay__title">Declined</span> </div> </div> 

Answer 4

function del(){
   var h =  document.body.outerHTML; 
   h = h.match('<div>...</div>');
   h.length--;
   return h;
}

I guess this will work just give it a try... i tried on browser console and it worked, this way you can match the exact you want.

Answer 5

I might as well add my take on this. Try running this in your console and see the question vanish.

// convert the whole page into string
let thePage = document.body.innerHTML,
string = [].map.call( thePage, function(node){
return node.textContent || node.innerText || "";
}).join("");

// I get some string. in this scenario the Question or you can set one yourself
let replacableCode = document.getElementsByClassName('post-layout')[0].innerHTML,
string2 = [].map.call( replacableCode, function(node){
return node.textContent || node.innerText || "";
}).join("");

// replace whole page with the removed innerHTML string with blank
document.body.innerHTML = thePage.replace(replacableCode,'');

Answer 6

If you want to identify divs with that particular data attribute, you can use a data-attribute selector. In the example below, I've used a button and click event to make the demo more visual, but in the console the only line you'd need would be:

$('div[data-entry-status="declined"]').remove();

 $(function() { $("#testbutton").click(function() { $('div[data-entry-status="declined"]').remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="entry-status-overlay" data-entry-status="declined"> <div class="entry-status-overlay__inner"> <span class="entry-status-overlay__title">Declined</span> </div> </div> <div id="x">Some other div</div> <button type="button" id="testbutton">Click me to test removing the div</button> 

See https://api.jquery.com/category/selectors/attribute-selectors/ for documentation of attribute selectors.

PS Your idea to paste some raw HTML into the jQuery constructor and then execute "remove" on it cannot work - you're telling jQuery to create an object based on a HTML string, which is, as far as it's concerned, a new set of HTML. It does not try to match that to something existing on the page, even if that exact HTML is in the DOM somewhere, it pays it no attention. It treats what you just gave it as being totally independent. So then when you run .remove() on that new HTML...that HTML was never added to the page, so it cannot be removed. Therefore .remove() has no effect in that situation.