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.

If you used chrome, you can press the up-cursor key in the dev console to get all the previous entries - if it's not been cleared, you might be lucky. — fdomn-m
– fdomn-m, Commented Jul 19, 2018 at 9:11
$('div').remove() will do, but be more specific by using class selector or id selector, otherwise it removes all div elements Eg; $('div.notes').remove() — Web pundit
– Web pundit, Commented Jul 19, 2018 at 9:11
No id selector .. Just copy paste the a specific code as some divs have the same id so it will delete them as well and I don't want this. I need to copy paste the code instead of using an id selector. — Mdermez
– Mdermez, Commented Jul 19, 2018 at 9:13
It's not clear where the op will be running this code, $ is a reference to jQuery and if it's not used on that page, that will not work. — Esko
– Esko, Commented Jul 19, 2018 at 9:13
he already have $ in his question, so guessing he have a reference to jquery library — Web pundit
– Web pundit, Commented Jul 19, 2018 at 9:14

blackmiaool · Accepted Answer · 2018-07-19 09:27:52Z

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

answered Jul 19, 2018 at 9:27

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frondor Over a year ago

Overkill at its best.

brk · Accepted Answer · 2018-07-19 09:26:30Z

2

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>

edited Jul 19, 2018 at 9:26

answered Jul 19, 2018 at 9:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

6 Comments

Mdermez Over a year ago

SIr. Thank you for your input. Trust me I had the code in the past and it was working - I just lost my note :( . The thing is that using id or class will remove wrong divs. But by using a specific code that contains unique information will delete the right stuff.

ADyson Over a year ago

@Mdermez " using id or class will remove wrong divs"...an ID must be unique to a single element, so it's hard to see how that would remove the wrong thing, as long as you gave the right ID. A class might select too many things, potentially, that's certainly true. But there are plenty of ways to restrict it using a more complex selector, or things like .find() or .parents() etc etc etc.

Web pundit Over a year ago

what he meant by wrong divs is "the divs he didn't want to remove"

Mdermez Over a year ago

Sir you're right on the id part. Unfortunately the website that I am looking to apply the code has classes instead of ids and as you can see in my second update it's some other information in that div that makes it unique. It's like an image overlay which is the same on all images. So I need to delete that overlay in order to see the content behind it.

Mdermez Over a year ago

&('<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()

|

Atul Sharma · Accepted Answer · 2018-07-19 09:22:32Z

1

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>

answered Jul 19, 2018 at 9:22

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

Comments

hibruce · Accepted Answer · 2018-07-19 09:53:25Z

1

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.

answered Jul 19, 2018 at 9:53

hibruce

113 bronze badges

1 Comment

Mdermez Over a year ago

Thank you for your input

Community · Accepted Answer · 2018-07-19 10:38:43Z

0

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

edited Jul 19, 2018 at 10:38

answered Jul 19, 2018 at 10:25

Community

1751 silver badge11 bronze badges

Comments

ADyson · Accepted Answer · 2018-07-19 09:50:23Z

-1

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.

P.S. 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.

edited Jul 19, 2018 at 9:50

answered Jul 19, 2018 at 9:36

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

6 Comments

Mdermez Over a year ago

Actually my idea worked. Please see the accepted answer. This is what I was looking for. I just pasted the desired code.

ADyson Over a year ago

@Mdermez good, but what's in the accepted answer is a rather different method to what you said in the question had been your code. You're very expensively traversing every single element in the whole DOM to find things with a literal string match to your HTML string. It'll work but it's not very efficient compared to using a proper selector. In a big document it might take some time. I assume it was you who downvoted my answer? I realise it's not precisely the methodology you wanted to use, but would you like to clarify how/why it fails to meet the same requirement albeit by a different route?

Mdermez Over a year ago

I always do things rationally. The reason I downvoted your answer is just because it didn't work as it should and you can see it from you own script. When you hit the button "declined" stays there when it should be removed. The accepted answer is not different from what I asked. I specifically said in "UPDATE 2" that I need to put the whole code there and not just a part of it. The reason is that while the data-entry-status="declined makes the div unique .. by removing just this won't remove the whole div. Your reply on this can be "why you didn't delete the div using the class selector?"

Mdermez Over a year ago

The reason is that many divs had the same class while some of them had the status that made them unique. So I wanted to be able to just paste the code I needed to be deleted. Perhaps an "exact-match" clarification would be more helpful for you and others. I am sorry I didn't mention this but I thought it was clear enough that I needed to just paste any code I wanted. Thank you though for your input.

ADyson Over a year ago

@Mdermez " When you hit the button "declined" stays there when it should be removed."...no, it doesn't. It disappears. I'm using the latest version of Chrome. What browser are you viewing this page with? Do you get an error in the snippet's console or anything?

|

Collectives™ on Stack Overflow

Remove any specific html code using javascript

6 Answers 6

1 Comment

6 Comments

Comments

1 Comment

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

6 Comments

Comments

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related