Unable to remove an HTML element from an object not in the DOM
<p>Why doesn't the following remove the <code>div</code> with class <code>hidden</code>?</p>

<pre><code>var data = 'This is a message &lt;div class="hidden"&gt; &lt;ul id="canceledOrders"&gt; &lt;li&gt;502301&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;';
$(data).find(".hidden").remove();
</code></pre>

<p>After running the above, <code>data</code>'s value remains the same. Is the <code>div</code> not removed because <code>data</code> is not in the DOM?</p>
