Attempting to eliminate a div element housed within an iframe by utilizing the onload event

Is there a way to remove specific div tabs from within an iframe by using the onload function set within the iframe itself? I want everything to be in one location for simplicity. It's important to note that I want to utilize the onload WITHIN this <iframe>

<iframe scrolling=no frameborder=0 src='insertwebsitehere' width=100% onload="this.height=this.contentWindow.document.body.scrollHeight;"> #document </iframe>

The div tabs I need to remove do not have specific ids, only classes:

  1. class="d2l-page-actions-container d2l-right"
  2. class="d2l-action-buttons"

I considered including something like this in the onload function:

<iframe onload="this.height=this.contentWindow.document.body.scrollHeight;this.contentWindow.document.html.body.removeClass('insertclasshere');">

However, it does not seem to work. Any advice on how to achieve this?

Any assistance is greatly appreciated. Thank you in advance.

javascripthtmlcssiframeonload

Answer №1

Consider implementing this code snippet within your onload function:

var items = this.contentWindow.document.querySelectorAll('.d2l-page-actions-container.d2l-right, .d2l-action-buttons');
for (var index = 0; index < elements.length; index++) { 
    elements[index].parentNode.removeChild(elements[index]);
}

While I cannot guarantee its efficacy within your iframe, it has proven successful in my own testing environment:

<body onload="var items = document.querySelectorAll('.d2l-page-actions-container.d2l-right, .d2l-action-buttons'); for (var index = 0; index < items.length; index++) { items[index].parentNode.removeChild(items[index]); }">
    <div class="d2l-page-actions-container d2l-right">d2l-page-actions-container d2l-right</div>
    <div class="d2l-action-buttons">d2l-action-buttons</div>
    <div class="otherClass">otherClass</div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to trigger a controller action when the datepicker's value changes?

Hello, I have a custom datepicker and I am trying to perform a calculation when the year is changed. The code provided below does not seem to work on onchange. I also attempted using the onchange attribute and calling a JavaScript function like this oncha ...

javascriptjqueryajaxgrailsdatepicker

JQuery-enabled button allows for the deletion of a dynamically generated list item

In my HTML file, there exists an ordered list: <ol id ="list"> </ol> As the user interacts with the page using JQuery and JavaScript, items are dynamically added to this list. Here's how it's done: $(function (){ $("#click-me") ...

javascriptjqueryhtml

Using regular expressions to replace strings in JavaScript

I have a URL that resembles the following http://localhost:12472/auctions/auction-12/lots/sort/something/12 I am looking to switch it out with this new URL http://localhost:12472/auctions/auction-12/lots/sort/somethingelse/12 Here, somethingelse can be ...

javascriptregexreplace

Attempting to align or position the wrapper div in the center or using a float with a width of

I'm struggling to align the main div in the center of the page with a 100% width or at least float it to the left. Can someone please advise on how to achieve this? http://jsfiddle.net/d36TC/6/ <div class="addInput"><div sytle="clear:both"& ...

htmlcsscss-float

Positioning a CSS dropdown menu within a wrapper that has a hidden overflow

Although the title may be vague, it's challenging to encapsulate exactly what I'm looking for in just a single sentence. The issue at hand is this: I have a template featuring multiple dropdown menus that are activated by jQuery. These dropdown ...

cssoverflowpositioning

Issue with showing helper text in MUI date picker when utilizing react-hook-form library

I have been using the react-hook-form library in combination with material-ui. One issue I am encountering is displaying a mandatory field error message for the date picker using the helper text attribute of MUI. Despite getting error messages for the text ...

javascriptreactjsmaterial-uidatepickerreact-hook-form

What are the steps to switch to a root page after a successful sign-in with Ember-Auth?

After successfully implementing Ember-Auth using a pure token based approach, I am facing a challenge in redirecting users to the root of my app once they sign in. Although I know about actionRedirectable (refer to for details), since I am using a pure t ...

javascriptauthenticationember.js

Tips for saving the visibility status of a <div> in your browser bookmarks?

Currently, I am in the process of developing a single webpage (index.html). The navigation bar at the top includes links to hash references (DIV IDs). If JavaScript is enabled, clicking on these links triggers a JavaScript function with the onclick attribu ...

javascripthtmlcssbrowserbrowser-history

The statusMessage variable is not defined within the "res" object in a Node Express application

I am currently developing a Node.js & Express.js application and I am in need of creating a route to display the app's status. router.get('/status', function(req, res) { res.send("Current status: " + res.statusCode + " : " + res.stat ...

javascriptnode.jsexpress

Retrieving HTML content from an AJAX request

Is it possible to query HTML data returned from an AJAX request? I attempted the following code: $.post("gethtml.php", { url: $url.val() }, function(data) { var $html = $(data), $links = $("link, script, style", $html), $body ...

jqueryhtmlajax

Interpolating strings in a graphQL query

Exploring the world of Gatsby and its graphQL query system for asset retrieval is a fascinating journey. I have successfully implemented a component called Image that fetches and displays images. However, I am facing a challenge in customizing the name of ...

javascripttypescriptgraphqlgatsby

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlcssangularanimation

What could be the reason for my select list not showing up?

Hello fellow developers, I am currently working on creating a dynamic tablerow that allows users to fill in input fields and select options from a list for each cell. While the input fields are functioning properly, I am facing an issue with displaying th ...

javascriptjqueryhtmlajax

Struggling to achieve improved results with Ambient Occlusion in three.js

After reviewing the demonstration here . var depthShader = THREE.ShaderLib[ "depthRGBA" ]; var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms ); depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vert ...

javascriptthree.js

Detecting Changes in Angular2 Component Attributes via Observables

When working with Angular 2 components that have input attributes defined using @Input, how can I create an observable to track changes to those input attributes (not to be confused with user input from a form)? export class ExampleComponent implement OnC ...

javascriptangularrxjsangular2-directives

What is the process of including a pre-existing product as nested attributes in Rails invoices?

I've been researching nested attributes in Rails, and I came across a gem called cocoon that seems to meet my needs for distributing forms with nested attributes. It provides all the necessary implementation so far. However, I want to explore adding e ...

javascriptruby-on-railsrubypostgresqlnested-attributes

Using Mongoose to Implement the Repository Pattern in Node.js

As a newcomer to node.js with a background in .net, I am interested in applying some of the design patterns I used with c#.net. However, I am encountering challenges due to the differences in object-oriented nature between c# and JavaScript. Specifically, ...

javascriptnode.jsmongooserepository-pattern

Issue with React-select: custom Control prevents select components from rendering

Implementing react-select@next and referring to the guide here for custom Control components is not yielding the desired outcome. import TextField from "@material-ui/core/TextField"; import Select from "react-select"; const InputComponent = (props) => ...

javascriptreactjsmaterial-designmaterial-uireact-select

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Issue with Bootstrap 4 nav bar where the first nav item is not highlighted and a problem with scrollspy

I have encountered an issue that I need help resolving. My Bootstrap 4 navbar has scrollspy enabled to update as you navigate through the page's sections, and a jQuery function provides smooth scrolling when clicking on navigation links. However, I am ...

javascriptjqueryhtmlcsstwitter-bootstrap