title: Can I completely remove a <small> element from my JQuery result?
body: <p>Here's my HTML:</p>
  
  <pre><code>&lt;li id="home"&gt;
  &lt;a data-href="/C"&gt;X&lt;br&gt;
  &lt;small&gt;Y&lt;/small&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I used the following to empty what is between the  tags. </p>
  
  <pre><code>a = li.parent().parent().children("a, span:not('.toggle')");
  var text1 = a.find('small').empty();
  var text2 = a.html();
  </code></pre>
  
  <p>This gave me:</p>
  
  <pre><code>&lt;li&gt;&lt;a&gt;X&lt;br&gt;
  &lt;small&gt;&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>However this still gives me the tags. Is there another way that I could do this instead of using <code>.empty()</code> some way that would remove the <code>&lt;small&gt;</code> tags and also the <code>&lt;br&gt;</code> ?</p>