title: Removing punctuation on click with jQuery
body: <p>I have code set up that loops through check-boxes and creates a list of the results on the top of an accordion menu. When you click the X next to each term they delete themselves and uncheck the box associated with it. However the separating commas and the colon at the start of the list remain when the tags are removed. I have a heavy handed way of dealing with this, but I feel like it could be much cleaner and faster but the solution I came up with keeps giving me syntax errors.</p>
  
  <pre><code>var divBlock = $(this).closest("h3 + div"); //finds parent h3 + div
  aObject = divBlock.prev().find("a:first"); //gets the a link in the h3
  originaltitle = aObject.html();
  
  var liItems = divBlock.find("li");
  for (var i = 0; i &lt; liItems.length; i++) {
      if (liItems[i].childNodes[0].checked) {
          var searchterm = liItems[i].childNodes[1].innerHTML;
          categoryString += "&lt;div class='choice'&gt;" + searchterm + "&lt;a href=\"javascript:void(0);\" class=\"delete_search_term\" id=\"close_" + searchterm.replace(/\s/g, "-") + "\"&gt;(x)&lt;/a&gt;,&lt;/div&gt; ";
      }
  }
  
  if (originaltitle.indexOf(": ") &gt; 0) {
      originaltitle = originaltitle.substring(0, originaltitle.indexOf(":"));
  }
  
  if (categoryString.length &gt; 0) {
      categoryString = categoryString.substring(0, categoryString.lastIndexOf(",")) + "&lt;/div&gt;";
      aObject.html(originaltitle + ": " + categoryString);
  } else {
      aObject.html(originaltitle.replace(":", "").trim());
  }
  </code></pre>
  
  <p>That code handles the creation of the strings and placement of the punctuation to format the list. The following code is kind of my do everything mish-mash that throws errors unless I comment out my subsub code.</p>
  
  <pre><code>$("a.delete_search_term").click(function () {
      window.location = $(this).attr('href');
      var itemName = this.id.replace("close_", "").toLowerCase();
      var liItems = $(this).closest("h3").next().find("li");
      for (var i = 0; i &lt; liItems.length; i++) {
          if (liItems[i].childNodes[0].id == itemName) {
              liItems[i].childNodes[0].checked = false;
          }
      }
      if (categoryString.length &gt; 0) {
          categoryString = categoryString.substring(categoryString.lastIndexOf(","));
          subsub = categoryString.substring(0, 1);
          $(subsub).remove();
      }
      $(this).parent().remove(); //Removes parent of selected object only
      return false;
  });
  </code></pre>
  
  <p>Created a JSFiddle by request:  <a href="http://jsfiddle.net/w4AxR/1/" rel="nofollow">http://jsfiddle.net/w4AxR/1/</a></p>