jquery remove() not removing

StackOverflow https://stackoverflow.com/questions/7174996

Question

I have the following code that allows me to implement the shareThis functionality. What I am trying to do is when a the close button of the share this overlay is clicked I trying to remove the shareThis functionality that comes with the .share-span and then re-initialise it, however remove() does not seem to remove .span-share from the DOM.

<script type="text/javascript">
function getShareData() {
    jQuery(".suit-gallery-btn").each(function(index){
        jQuery(this).children().remove('span');
        jQuery(this).append("<span class='share-span'></span>"); // ShareThis button will be inserted in this span, which we are appending to each <div class="suit-gallery-btn">
        var suitLink = jQuery(this).find('a'); // the "click more information" link. you will need the href and title from this element.
        console.log(suitLink);
        stWidget.addEntry({
            "service":"email",
            "element": jQuery(this).find('.share-span')[0],
            "title":suitLink.attr('title'),
            "type":"large",
            "text":suitLink.attr('title'),
            "image": suitLink.attr('href'),
            "summary":suitLink.attr('title'),
            "onhover": false
        });
    });
}

jQuery(document).ready(function() {
    getShareData();
    jQuery("#closeX, #greyScreen, .stCloseNew2, .close, .close2").live("click", function(){
        getShareData();
    });
});


    <div id="suit-gallery">
  <img src="../images/galleries/business/DSC_0055_sm.jpg" alt="Stylish button 3 business suit, beige lightweight high twist cool wool Holland &amp; Sherry" width="164" height="247" />
  <div class="suit-gallery-btn">
    <a href="../images/galleries/business/DSC_0055.jpg" rel="lightbox[business]" title="Stylish button 3 suit, beige lightweight high twist cool wool Holland &amp; Sherry from £695 choice of 90 designs and colours">Click for more information</a>
</div>
</div>
Was it helpful?

Solution

change this line:

jQuery(this).children().remove('span');

to:

jQuery(this).children('span.share-span').remove();

See this in action here: http://jsfiddle.net/MarkSchultheiss/CUrXF/ where I slightly changed it to show the original span, then the removing when the function is called.

OTHER TIPS

You've misunderstood the semantics of remove.

You call remove on the object that needs to be removed, not off the parent object you want to remove it from.

Something like:

 jQuery('span.share-span', jQuery(this)).remove();

From what I can see, there is no span in the original code.

It looks like you are trying to remove() the span before you have appended it?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top