How to remove href attributes from a tag and remove css associated to it in iframe using jquery

Tags: jquery,html,css,iframe

Problem :

I have a following set of codes in iframe with an id of #nitseditpreview:

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
        <li class="scroll active"><a href="#navigation">Home</a></li>
        <li class="scroll"><a href="#aboutus">About Us</a></li>
        <li class="scroll"><a href="#services">Services</a></li>
        <li class="scroll"><a href="#ourteam">Our Team</a></li>
        <li class="scroll"><a href="#portfolio">Portfolio</a></li>
        <li class="scroll"><a href="#clients">Clients</a></li>
        <li class="scroll"><a href="#blog">Blog</a></li>
        <li class="scroll"><a href="#contact">Contact</a></li>

I want to remove href values from anchor tag and also css associated with it which is mentioned in a stylesheet i.e.:


#navigation .navbar-inverse .navbar-nav  .active  a,  
#navigation .navbar-inverse .navbar-nav  .active  a:focus, 
#navigation .navbar-nav.navbar-right li a:hover {
    color: #fff;
    background-color: #fc7700;

I'm using jquery to execute this function, so far I am able to get the element by this:


$(document).ready(function () {
$('#nitseditpreview').load(function () { //The function below executes once the iframe has finished loading
    var menu = $(this).contents().find('#nitsmenu');
    $(this).contents().find('#nitsmenu' > li);

Shall I use each function to get the desired output?

Solution :

Try This:

var all_li;
$(document).ready(function () {
$('#nitseditpreview').load(function () { //The function below executes once the iframe has finished loading
    var menu = $(this).contents().find('#nitsmenu');
    all_li = $(this).contents().find('#nitsmenu' > li);

    jQuery(all_li).find("a").css({'color':'#000','background-color':'none' });

I Added these two lines

 jQuery(all_li).find("a").css({'color':'#000','background-color':'none' });

which remove all href and change css..

    CSS Howto..

    How to add CSS class to CQ dialog box

    Creating a responsive drupal 7 slideshow

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • How can I get a box shadow to start below a thick border?

    How can I force a table made using the CSS display: table to fit within a minimum height?

    How to decrease CSS opacity

    How do I simulate a hover with a touch in touch enabled browsers?

    How to expand my CSS3 menu and reduce its width

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    How to fit the parent of a CSS transformed HTML element?

    How to make a line in a table with CSS

    How is this menu icon created only with CSS?

    CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

    How do I animate an entire table row in Angular without affecting the table row border?

    How to make a CSS border for a dropdown menu?

    How do you put two divs next to each other so they fill up the available space

    How to create css classes which are “stronger” that elements?

    How to reuse a css background sprite for icons of different sizes?

    How to convert a jQuery fade effect in CSS?

    How to make a new class

    css - how to add another div above one with 2 colums layout?

    How to set a background-color to element which has the same id with anchor of url?

    How to chose which CSS rule to use from multiple style sheets

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    Nested CSS: How to get to the child?

    How to add css style if user scroll page over 112px

    how do responsive recaptcha images

    Jquery show/hide more data

    bootstrap collapse to show a div it work but how to make it didn't affect side items?