views:

102

answers:

8

I tried:

<script>
$(function() {
$('.class').before('<!--');
$('.class').after('-->');
});

</script>

but it didn't work for a reason unknown to me.

Can anyone help me understand why it didn't work and how I would do it? Thank you, much appreciated.

+3  A: 

It looks like you're trying to make objects with .class disappear. Use .hide() instead. Comments are only parsed when the browser first loads the page, so adding comments won't comment something out.

You need to learn the difference between HTML and the DOM. HTML is the textual representation of the page, but the browser parses it into the DOM on page load. JavaScript works on the DOM, not on the HTML. Using .innerHtml() on DOM elements reparses the HTML.

Here's an example of using innerHtml() to hide elements using HTML comments (but note that I would never do this - I'm only showing how to do what it looked like you were trying to do in your question):

HTML:

<h1>hello</h1>

<div>
    <p>wow</p>
    <p>dude</p>
</div>​

JavaScript (+ jQuery):

$(document).ready(function () {
    setTimeout(hideIt, 1000);
});

function hideIt() {
    $('div').html('<!--' + $('div').html() + '-->');
}​
Skilldrick
your hideIt is valid and does answer this, but reversing it is not as easy as if you use .detach() (see my example for one option/use pattern)
Mark Schultheiss
@Mark - Like I said, I'd *never* do anything like this - I was just showing how to add HTML comments like the OP wanted to do.
Skilldrick
Yep, agree, why I upvoted this answer. See my (newest) answer for a more direct/possibly better "solution" to this which removes the depenancy on the outside div.
Mark Schultheiss
Thanks, this is what I was wanting to do- So thank you, I did choose to go with a .css route to achieve what I was wanting. Display="none". I was working on building a Lazy flash loader and did it, now I need to make it better. Might post another question on that :)
A: 

I think you would need prepend and append to do it the way you are thinking. Not sure if it would actually make things disappear though.

If you want something to not be visible, your best bet would be to use hide().

Cyrena
A: 

Using .hide() is a better way to achieve what you want. Also worth mentioning that comment objects are part of the DOM so in theory you could manipulate them (or add new ones) using jQuery.

burkestar
+1  A: 

No, you can't add a starting and ending commend tag like that. The comment tag is a single tag, it's not a seprate starting tag and ending tag. So, <!-- and --> are not a valid HTML fragments, as they don't contain complete tags.

If you want to put an element inside a comment, it's no element any more, so to do that you would have to get the HTML code for the element, put a comment tag around it, and replace the element with the comment.

If you do this to hide the element, you should simply use the hide method instead.

Guffa
+4  A: 
T.J. Crowder
+1 - exactly what I was trying to say about HTML and the DOM but better :)
Skilldrick
Thanks, would of thanked you sooner but stackoverflow didn't email me confirmations. I ended up exploring the internet and found a .css solution. Style.display="none". The reason I needed to do this was to make a lazy like loader for flash which I accomplished- I just need to perfect it now.
@user455046: *"...I ended up exploring the internet and found a .css solution. Style.display="none"..."* Yup, that's what `hide` does.
T.J. Crowder
A: 

Some options:

$('.mycurrentclass').remove(); 

$('.mycurrentclass').detach();// see below for possible use

$('.mycurrentclass').css({display:'none'});

$('.mycurrentclass').hide(); 

$('.mycurrentclass').toggleClass('myhiddenclass');

$('.mycurrentclass').addClass("myhiddenclass");

$("myselector").toggle(
  function () {
    $(this).addClass("myhiddenclass");
  },
  function () {
    $(this).removeClass("myhiddenclass");
  }
);

// programtic like you seem to want:(first part puts it back, else detaches it)
var p;
if ( p ) 
{
  p.appendTo("mywheretoappenditselector");
  p = null;
} 
else 
{
  p = $("myselector").detach();
};
Mark Schultheiss
A: 

To provide a more direct answer, use:

var gonee = $('.myclass');
$('.myclass').replaceWith('<!--' + gonee + '-->');

see me in action: http://jsfiddle.net/YNe6w/1/

Mark Schultheiss
don't you mean `'<!--' + gonee.html() + '-->'`? This currently adds `<!--[object Object]-->` to the DOM :) [in Chrome anyway]
Skilldrick
In IE8 compatibility mode, "goner" div is gone on the fiddle page. So in theory, the div holding the "goner" text should be the context and thus removed/hidden by the comments addition.
Mark Schultheiss
Mark - As @Skilldrick pointed out, the comment ends up looking like `<!--[object Object]-->` instead of `<!--<div id='goner' class='goner'>goner</div>-->`. Although using `.html()` wouldn't really work either.
patrick dw
A: 

pls use .html() to add html content dynamically

eg:

  $(.dv).click(function(){
 $(".dy").html("abcd");
 });
 <div class=".dy" >
 </div>

try it and hope it will work for you

Vishnu K B