Search code examples
javascriptjquerydom-manipulationsharethis

jquery remove() not removing


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>

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.