jQuery.hide() not working on element that I verified exists

So, in line 68 of my JavaScript code I try to hide the elements with the id test, but they are not being hidden. I verify that the element with the id test exists through the console because the element has a length on lines 61-67, but jQuery is not removing the element after I use $("#test").hide(); to try and hide the elements with the id test. I don’t understand why jQuery can’t hide something that for sure exists. Thanks! See: https://codepen.io/afox/pen/dvmVeJ?editors=1010

I wasn’t able to get your code to work - too many problems with the AJAX were hanging it up and it never got to your test code.

I always like to simplify things. I got this to work:

$( document ).ready(function() {
	$('#show').on('click', function() { $("#test").show(); });
	$('#hide').on('click', function() { $("#test").hide(); });
});

with

<span id = 'test'>Test!</span>

<br/><br/><br/>

<button id = 'show'>Show</button><button id = 'hide'>Hide</button>

Interesting. Could you not get the CodePen to work, or just the code itself? If the code itself doesn’t run on a site other than CodePen, it might be because I registered a client ID that only works with the CodePen URL. I think that it should work fine in the CodePen I provided. If it doesn’t, please let me know.

If I remember correctly, I tried to run your code in codepen, but nothing happened. So I put a console.log statement before your test code and found that the program was never getting there because there was an AJAX error.

id must be unique.
You can’t have same id on different elements. Use class or data-*

1 Like

Wow, this solved my dilemma. I don’t know how I got this far without realizing that IDs must be unique. Thank you so very much, jenovs!