2

How do I use the JavaScript console to see why this code:

// Empty info
if ($('.perma-info').text() == '') {
    $('.perma-info').remove();
}

Doesn't work in this page: http://dev-indiehaz.tumblr.com/post/22897976111/vans-vw

I want it so that if the element is empty, I can remove it.

Huangism
  • 16,278
  • 7
  • 48
  • 74
Harry
  • 1,120
  • 1
  • 12
  • 15
  • What is `imagesLoaded` method? – VisioN May 14 '12 at 20:55
  • possible duplicate of [How do you launch the javascript debugger in Google Chrome?](http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome) – Phrogz May 14 '12 at 20:57
  • I would think that that call would return a set of elements. You may have to do something like "$('.perma-info').each(/*Check for each element goes here*/);" – Mike Webb May 14 '12 at 20:57
  • @Mike [Nope](http://api.jquery.com/text/): _"The result of the .text() method is a string containing the combined text of all matched elements."_ My guess for this particular problem: whitespace. – Phrogz May 14 '12 at 20:59
  • @VisioN its part of the masonry plugin, but the documentation is old, I haven't yet got round to reading through the plugin's source to sort it out. – Harry May 14 '12 at 21:00
  • FWIW Note that `if (str=="")` can be shortened in JavaScript to just `if (!str)` for known string values. (Empty strings are _'non-truthy'_ values.) – Phrogz May 14 '12 at 21:04
  • 1
    you need to trim, see my answer – Huangism May 14 '12 at 21:05
  • @Phrogz: I should have specified. I meant the call "$('.perma-info');" In my experience it gives me the wrapped element set with all elements that have the class '.perma-info', with which you can call '.each(function () {/*my function to check each element*/});'. I could be wrong, though. – Mike Webb May 14 '12 at 22:37

4 Answers4

3

You could start by:

console.log($('.perma-info'));

and then you observe the console. 2 possibilities: you get an empty resultset in which case you obviously should check your selector as there probably isn't an element with the class="perma-info" in your DOM or you get some result in which case you continue with:

console.log($('.perma-info').text());

and then observe the console. If you get an empty text then the if condition should work. If it prints some value then the DOM element that was matched had some text.

Happy debugging.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I put the first method in my code, but nothing came up in the console. Any ideas? – Harry May 14 '12 at 21:04
  • I doubt that nothing came out in your console. At least an empty array should have come up. In this case, as I've already stated in my answer, this means that there's no DOM element that matches your class selector. – Darin Dimitrov May 14 '12 at 21:06
  • This is my screen: http://i.imgur.com/oeXFB.png, not really sure whats wrong here. Help would be appreciated. – Harry May 14 '12 at 21:21
  • 1
    Well, you have javascript errors. You should fix them. And honestly I don't know what exactly are you expecting as answer without showing your code. Posting a link to some web site is not enough. Nobody is going to do code reviews to your site. You should do the effort to isolate the problem yourself and then come back here and ask a real question. – Darin Dimitrov May 14 '12 at 21:22
3

Press F12 and set a breakpoint.

Gabe
  • 49,577
  • 28
  • 142
  • 181
  • 1
    @Harry Run until you hit it look in the Locals window and/or run expressions in the console to validate your assumptions about what is going on. – Phrogz May 14 '12 at 21:05
2
  1. Open up your Google Chrome Developement tool and click on Scripts
  2. Select the correct script file and set the breakpoints you want (on the if-statement preferrably)
  3. Start running the script!
  4. Devtool will stop on the breakpoint. You can see global and local variables. You should store the text-value to a variable in order to see the actual content of the variable.
supertopi
  • 3,469
  • 26
  • 38
1

Follow others instructions to get to the dev tool but I think inside of your li there is a space. I use firebug on firefox and I saw a space.

try

if ( $.trim($('.perma-info').text()) == '') {
    $('.perma-info').remove();
}
Huangism
  • 16,278
  • 7
  • 48
  • 74
  • Whitespace is certainly the problem (there are over 500 newlines or spaces in the result), and the suggestion to use [`$.trim()`](http://api.jquery.com/jQuery.trim/) is _almost_ spot on. However, note that it must be `$.trim($('...').text())`. +1 if you fix that. – Phrogz May 14 '12 at 21:01
  • can you post the code you have please, is the code inside of document.ready? – Huangism May 15 '12 at 17:23