CODEWITHSUNDEEP
javascriptjqueryhtml
Walnut
Walnut

Reputation: 51

Jquery .load() only parent and ignore children

So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.

I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)

$('#myNewDiv').load('/robots .heading-image');

Here's HTML code from the other page

<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
   <div class="left">
      <div class="heading-image title">Heading Title</div>
      <div class="heading-image desc">I am a desc</div>
   </div>
   <div class="right">
      <div class="heading-image stat">Stat text</div>
   </div>
</div>
</div>

That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.

To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)

Upvotes: 0

Views: 320

Answers (2)

ryan.kom
ryan.kom

Reputation: 187

From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.

The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:

CSS

.heading-image{
   background-image:url(imagelinkhere.png);
}

JavaScript

$('#myNewDiv').html("<div class="heading-image"></div>");

Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:

$('#myNewDiv').load('/robots .heading-image', function(){
    // new html exists in page now, 'this' is #myNewDiv element
    $(this).find('.heading-image').empty();
});

If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :

$.get('/robots').then(function(html){
    var $hImage = $(html).find('.heading-image').empty();
    $('#myNewDiv').html($hImage)
});

With all that said I don't see why you need to extract an empty element from another page and can't just do:

$('#myNewDiv').html('<div class="heading-image"></div>')

Upvotes: 0

Related Questions