Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node #227

Open
MontyHu opened this issue Oct 12, 2019 · 2 comments
Open

TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node #227

MontyHu opened this issue Oct 12, 2019 · 2 comments

Comments

@MontyHu
Copy link

MontyHu commented Oct 12, 2019

Using baguettBox Version: 1.11.0

I'm having a problem and can't figure out the solution. When I click on a thumbnail image, the popup window appears that should display the larger image, but the image is missing, just the empty popup window appears. When I checked the console I saw this error message:

[Error] TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node
removeChild (baguetteBox.js:552)
(anonymous function) (baguetteBox.js:552)

Which is referring to this code in the baguetteBox.js file, the two >> indicated line 552.

    // Prepare gallery img element
    var image = create('img');
    image.onload = function() {
        // Remove loader element
        var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
>>      figure.removeChild(spinner);
        if (!options.async && callback) {
            callback();
        }
    };

This is the HTML code I'm using to build the gallery images.

<div class="gallery">
	<a href="myphoto.jpg" data-caption="Photo caption text">
		<div class="gallery-image-wrap">
			<img class="gallery-image" src="myphoto_thumg.jpg">
		</div>
	</a>
	<a href="myphoto2.jpg" data-caption="Photo caption text">
		<div class="gallery-image-wrap">
			<img class="gallery-image" src="myphoto2_thumg.jpg">
		</div>
	</a>
</div>

I'm loading the baguetteBox.css file in the <head> of my page, and executing this at the bottom of my page:

 <script>baguetteBox.run('.gallery');</script>

I don't know what I'm doing wrong or why this started happening. I'm using this on a Bootstrap 4 website as well. Is there anything I can try to fix it? Thanks.
@MontyHu
Copy link
Author

MontyHu commented Oct 12, 2019

Hello, I discovered the problem. There was another div that used the class "gallery" which was confusing the script, once I removed the extra one it worked again!

@LeoniePhiline
Copy link

Attention people building Single Page Applications and other dynamic stuff:

If you call baguetteBox.initialize() more than once, with changing galleries - make sure to call baguetteBox.destroy() in-between! Else you will end up with this exact error (TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node).

E.g. in Vue, use mounted () {} for baguetteBox.initialize() and beforeUnmount () {} for baguetteBox.destroy().
If you stay in the same component, use a watch for baguetteBox.destroy(); baguetteBox.initialize();.

Depending on when and how you call destroy(), you might want to check if (document.getElementById('baguetteBox-overlay')) before calling baguetteBox.destroy(), as baguetteBox does not check by itself if it has even been initialized before destroying, and you will end up throwing a bunch of errors if you call destroy() before your first initialize().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MontyHu @LeoniePhiline