Develop Reference

Javascript for deleting DIV that blurs website

There is a website with the following div:
<div class="x" style="user-select: none; filter: blur(4px);">
under this div there are a lot of other divs. I would like to know if there is any possibility to delete only this DIV with javascript. So only that one gets deleted and all the divs underneath remain.
I want to get rid of this DIV becouse this div blurs an part of the website text. Just changing the blur(4px) wont work the website has some kind of protection what refreshes this part back to original.
the reason i am searching for an possibility in javascript is because i want to automate this in the browser.(Just deleting DIV manually under developer mode works)
so far i got the following:
var div = document.getElementsByClassName('page-content');
div.remove(); //(but this does not work)

getElementsByClassName() returns a collection. Only single objects have remove() method. You have to apply one of the following:
Use brackets to specify an index of the object you want to get:
div[0].remove()
Use item() method passing the index as well:
div.item(0).remove()
Both ways are equivalent.
As an alternative, you may call querySelector() method:
const div = document.querySelector('.page-content')
It returns a single object (according to the passed CSS selector) so you can use:
div.remove()
Edit:
To remove only the covering div, you may use replaceWith() method and pass the child nodes of that div as an argument:
div.replaceWith(...div.childNodes)
If you want to keep only element nodes, use children property:
div.replaceWith(...div.children)

Changing value of span (Javascript) with Tampermonkey

I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends

The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';

jQuery load div into another without .html() method

I have a div (let's call it potatoes) that I want to appear inside another div (food). The typical way to do this would be:
$("#food").html ( $("#potatoes").html());
However this doesn't accomplish what I want. Instead of using the actual "potatoes" div, jQuery seems to be copying that content into the food div, where the original content still exist in the browser.
I want the ACTUAL div (potatoes) to disappear from its place and to appear in the container div (food) without having to do perform .hide() ... or similar methods.
Reason why? I have selectors that enable and disable buttons in the potatoes div, and they seem to trigger the original potatoes div content, but NOT the duplicate that has been loaded into the food div.
Does that make sense? Can anyone give insight as to why this is and what I should do?
Side note:
$(document).on('click','#button-loaded-with-page', {} ,function(e){
this.disabled = true;
$('#button-inside-potatoes-div').hide();
});
The above example is what I would like to achieve, but does NOT hide the button when the potatoes content has been loaded into food by the .html() method. Instead it hides the original button on the page, and not the duplicated one.
What I am trying to achieve: https://jsfiddle.net/o9kshscj/6/

You can just pass the object to html()
$("#a").html($("#b"));
Demo: Fiddle

You could use append to change the parent. This will move the #potatoes object out of it's current DOM position, into the #food div as a child
$("#food").append($("#potatoes"));

You can just remove the div after replacing like this:
$("#a").html($("#b").html());
$("#b").remove();
$("#button-to-enable").prop("disabled", false);

"replaceWith" not altering contents

The directive replaceWith as used in the code below only changes the target content once. If I send any other object the alert shows the proper value but not the div.
function identify (thisobj) {
alert(thisobj.value);
$("#test").replaceWith(thisobj.value);
}
The target element is shown below.
<div id="canvas_container">
<div id="test">This is a test</div>
</div>
Various objects are being passed, here, each with a different value. But though the Alert() reflects the proper content, the #Test only allows a one time change and then it retains that value forever.

You are replacing #test with your new element. It won't work again unless the element you replace it with also matches that selector.
From the jQuery docs:
The .replaceWith() method removes content from the DOM and inserts new
content in its place with a single call.
Assuming you want to keep the #test element, you can use the html method to replace the contents of it, rather than the element itself.

.replaceWith() substitutes an entire DOM node; you should be using .html(thisobj.value) or .text(thisobj.value)

You have misunderstood the use of replaceWith: it replaces the element you call it on, so after the first use, there is no element #test anymore.
You want text or maybe html:
$("#test").text(thisobj.value);
If your value contains html, use:
$("#test").html(thisobj.value);

replaceWith removes the #test element and replaces it with what you set (thisobj.value).
To replace an element's content, use .html() (or .text()).
function identify (thisobj) {
alert(thisobj.value);
$("#test").html(thisobj.value);
}

replaceWith will replace the entire element, to replace the content within #test, use:
$("#test").html(thisobj.value);

Have you looked into jQuery's text() function? If not, http://api.jquery.com/text/
It may help with replacing text

innerHtml not working for nested div tags

I am not able to replace .innerHtml for a div tag which is nested in other div tags. I used firebug to make sure that getElementById() is working.
<div class="a">
<div class="b"><div id="hello"></div></div>
</div>
In javascript code I am using:
document.getElementById("hello").innerHTML = "hello world";
Using firebug, I have verified that "hello" div is picked up (that is, it is not null). But the string "hello world" is not showing up.
Kindly help.
Thanks.

use innerHTML rather than innerHtml. note the capitalization.
On a side note, IE also supports innerText.

The example you provided works for me... so, I think you should make sure that the script is executed after the element has been created in the DOM.
For example, place the script element after the div you want to add contents to.
So if this fixes the issue, then you should add an event listener to the window’s onload event which will run all scripts.
And as Amaan said, don’t place a div element inside an a element.