.removeClass not functioning within .replaceWith

Question

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."

Here is the code:

 <script type="text/javascript">
    $(document).ready(function(){
        var webform = document.getElementById('block-webform-client-block-18');
        var unmarriedbutton = document.getElementById('unmarried');
        var buyingblock = document.getElementById('block-block-10');

        $(unmarriedbutton).click(function () {
            $(buyingblock).fadeOut('slow', function() {
                $(this).replaceWith(function () {
                    $(webform).removeClass('hiddenbox')
                });
            });
        });
    });
    </script>

The CSS on 'hiddenbox' is nothing more than "display: none.'

There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.

Can someone please tell me where the error is? Thanks!

Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

Answer 1

NB, use jquery !

    var webform = $('#block-webform-client-block-18');
    var unmarriedbutton = $('#unmarried');
    var buyingblock =$('#block-block-10');
    unmarriedbutton.click(function () {
        buyingblock.fadeOut('slow', function() {
            $(this).replaceWith( webform.removeClass('hiddenbox'));

        });
    });

Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Answer 2

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.

I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:

$(this).replaceWith(function () {
       return($(webform).removeClass('hiddenbox'));
});