How to exclude empty xml node label/field from display?

I have a jquery ajax call that parses the information correctly and shows it to the user as a collapsible list in jquery mobile. I have one issue which I can't find a solution for. I have played around with the replace function but can't get it to work (code below in script). I think that is the route I need to go. In my code below I am pulling the nodes 'method' and 'clinical_utility' and have placed labels for each as just html text in the associative array. My issue now is that when an entry has one of those nodes empty I obviously get no value for the record displaying but still get the label and the field showing as a row to the user. Is there a way to do this with the replace function?

Thanks for any help/tips.

 <script>
          $(document).ready(function(){

                            $.ajax({
                                   type: "GET",
                                   url: "testlist.xml",
                                   dataType: "xml",
                                   success: function(xml) {
                                   var $ul = $("#testList"); 
                                   var categories = new Object();
                                   var category;
                                   $(xml).find('test').each(function(){
                                                            category = $('category', this).text();
                                                            if (categories[category] == undefined){
                                                            categories[category] = '<h3>' + $('test_code', this).text() + " - " + $('name', this).text() + '</h3>' + '<p>' + "CPT Code(s): " + $('cpt_code', this).text() + '</p><p>' + "Method: " + $('method', this开发者_运维问答).text() + '</p><p>' + "Clinical Utility: " + $('clinical_utility', this).text() + '</p>';
                                                            } else {
                                                            categories[category] += ',' + '<h3>' + $('test_code', this).text() + " - " + $('name', this).text()  + '</h3>' + '<p>' + "CPT Code(s): " + $('cpt_code', this).text() + '</p><p>' + "Method: " + $('method', this).text() + '</p><p>' + "Clinical Utility: " + $('clinical_utility', this).text() + '</p>';
                                                            }
                                                            });
                                   for (category in categories) {
                                   $ul.append('<div data-role="header" data-theme="a" id="test-heading"><h1>' + category + '</h1></div>');
                                   var tests = categories[category].split(',');
                                   for (var i=0; i<tests.length; i++){
                                   $ul.append('<li><div data-role="collapsible" data-collapsed="true" data-theme="b">' + tests[i] + '</div></li>');
                                   }
                                   }
                                   function finish() {
                                   jQuery('test-li').remove();
                                   $('Method:[method=""]').each(function() {
                                               $(this).parent('li').html($(this).text());
 });
}
}
                                   });
                            });
          </script>

You could search your string for <p>Method: </p> or <p>Clinical Utility: </p> and replace them with nothing if you want to go with the replace route. I think you're probably better off checking to see if the values exist before adding the label and value to your string, though.