add or remove css file from the page using jquery

Question

i wants to delete all css file from my page on page load after topHeader div closing except one which inside top header for that i have written some jquery code but its not working for please anyone can help?

<div class="topHeader" style="background-color: #0a5fa2 !important">
    <div class="stripe">
        <div class="row">
            <div class="col-md-4">
                <p class="needHelp">Need Help?</p>
                <p class="helpDesk">Hotel Reservation Helpdesk (Working Hours TO 8PM)</p>
            </div>
            <div class="col-md-8">
                <div class="wprTopicon">
                    <span class="whyBookWith">Why book with us ?</span>
                    <div class="secureTrans">SECURE
                        <br> TRANSACTIONS</div>
                    <div class="bestRateGurtee">BEST PRICE
                        <br>GUARANTEED</div>
                    <div class="bestOffer">BEST OFFER</div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
</div>//topHeader closed
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates- common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<script>
$(function() {
    var count = 1;
    $('link').each(function() {
        var href = $(this).attr('href');
        if (href == "http://wotfly.com/templates-common/106/css/newheader.css") {
            if (count > 1) {
                $(this).remove();
            }
            count++;
        }
    });
});
</script>

Remove function is not deleting the css file  from the page please help?

try $("link[href*='http://wotfly.com/templates-common/106/css/newheader.css']").remove(); — Amit Soni
– Amit Soni, Commented Jun 4, 2015 at 5:45
this will delete all css file with same href while i want to delete all except one — Sunil K
– Sunil K, Commented Jun 4, 2015 at 5:57

Satpal · Accepted Answer · 2015-06-04 06:15:00Z

2

You can simply use :not(:first) to exclude first link and remove rest

$("link[href*='http://wotfly.com/templates-common/106/css/newheader.css']:not(:first)").rem‌ove();

answered Jun 4, 2015 at 6:15

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Norlihazmey Ghazali · Accepted Answer · 2015-06-04 06:03:13Z

0

There is two problems :

You misspelled function ready.
extra space there on link no 2. href="http://wotfly.com/templates- common/

See below snippet. And inspect the element to see the link exist or not.

$(function () {
    var count = 1;
    $('link').each(function (i, e) {
        
        var href = $(this).attr('href');
        if (href == "http://wotfly.com/templates-common/106/css/newheader.css") {
            
            if (count > 1) {
                $(this).remove();
            }
            
        }
        count++;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topHeader" style="background-color: #0a5fa2 !important">
    <div class="stripe">
        <div class="row">
            <div class="col-md-4">
                <p class="needHelp">Need Help?</p>
                <p class="helpDesk">Hotel Reservation Helpdesk (Working Hours TO 8PM)</p>
            </div>
            <div class="col-md-8">
                <div class="wprTopicon"> <span class="whyBookWith">Why book with us ?</span>

                    <div class="secureTrans">SECURE
                        <br>TRANSACTIONS</div>
                    <div class="bestRateGurtee">BEST PRICE
                        <br>GUARANTEED</div>
                    <div class="bestOffer">BEST OFFER</div>
                </div>
            </div>
        </div>
    </div>
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
</div>
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">

edited Jun 4, 2015 at 6:03

answered Jun 4, 2015 at 5:36

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

4 Comments

Sunil K Over a year ago

Hi thanks for the rply but that's not an issue...this code is not able to delete css file.

Norlihazmey Ghazali Over a year ago

and one more thing, try put count++; outside if statement. see updated code

user786 Over a year ago

You can not delete any file on server with javascript or jquery

Sunil K Over a year ago

if we put count++; outside page also containing so many link and each loop run for all links and count will increase and it will delete all css file with given href while i want to delete all except one

Raul Souza Lima · Accepted Answer · 2015-06-04 06:06:07Z

It should work...

var elements = document.querySelectorAll("link");

for(var i=0; i < elements.length; i++) {
    var el = elements[i];
    if(el.parentNode.className !== "topHeader") {
        $(el).remove()
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topHeader" style="background-color: #0a5fa2 !important">
    <div class="stripe">
        <div class="row">
            <div class="col-md-4">
                <p class="needHelp">Need Help?</p>
                <p class="helpDesk">Hotel Reservation Helpdesk (Working Hours TO 8PM)</p>
            </div>
            <div class="col-md-8">
                <div class="wprTopicon"> <span class="whyBookWith">Why book with us ?</span>

                    <div class="secureTrans">SECURE
                        <br>TRANSACTIONS</div>
                    <div class="bestRateGurtee">BEST PRICE
                        <br>GUARANTEED</div>
                    <div class="bestOffer">BEST OFFER</div>
                </div>
            </div>
        </div>
    </div>
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
</div>
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">
<link rel="stylesheet" type="text/css" href="http://wotfly.com/templates-common/106/css/newheader.css">

Collectives™ on Stack Overflow

add or remove css file from the page using jquery

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related