CODEWITHSUNDEEP
javascriptjquery
weezle
weezle

Reputation: 81

.remove() not working in IE and Firefox

I'm loading div element through jQuery .load() method like this:

$(document).ready(function() {
    $(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList");
});

Through that I get list of items, let's say 5 of them.

<div class="module-wrapper">
    <div class="genericItemList">
        <div class="genericItemView">Item 1</div>
        <div class="genericItemView">Item 2</div>
        <div class="genericItemView">Item 3</div>
        <div class="genericItemView">Item 4</div>
        <div class="genericItemView">Item 5</div>
    </div>    
</div>

Now I want to use jQuery .remove() because I want to show just first 3 items. HTML above is just example, in reality each item has a lot of HTML code so I want to use jQuery .remove() instead of CSS display:none.

I do that like this:

$(window).load(function() {
    $(".module-wrapper .genericItemView:gt(2)").remove();
});

This is working only Chrome, but not in Firefox or IE, where I can see all 5 items.

Any suggestions?

Upvotes: 0

Views: 2812

Answers (6)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262989

To ensure that code only runs after the elements have been loaded, you should put it in the callback function passed to load():

$(document).ready(function() {
    $(".module-wrapper").load(
        "index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList",
        function() {
            $(".module-wrapper .genericItemList:gt(2)").remove();
        }
    );
});

Your class selector may also be wrong, I tried to rectify it in the code above. It looks like you want to match descendants of .module-wrapper that expose the genericItemList class, but your original selector matches the elements that expose both the module-wrapper and genericItemView classes instead.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the success callback of the load() method to write dom manipulation

$(document).ready(function() {
    $(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList", function(){
        $(".genericItemView:gt(2)", this).remove();
    });
});

Upvotes: 1

Waqas Ghouri
Waqas Ghouri

Reputation: 1140

add space before .genericItemList 

$(".module-wrapper .genericItemList:gt(2)").remove();

Upvotes: 1

Tamil Selvan C
Tamil Selvan C

Reputation: 20209

Change it $(".module-wrapper.genericItemView:gt(2)").remove(); to $(".module-wrapper .genericItemList:gt(2)").remove();

Upvotes: 1

Dineshkani
Dineshkani

Reputation: 3015

Change your class name genericItemView to genericItemList.

$(".module-wrapper .genericItemList:gt(2)").remove();

See Demo

Upvotes: 1

PSR
PSR

Reputation: 40338

change genericItemList to genericItemView

 $(".module-wrapper .genericItemView:gt(2)").remove();

Upvotes: 1

Related Questions