Jquery remove() dynamically created elements
<p>I have a templating system that, in some exceptions, have to remove DOM elements after append them to the DOM.</p>

<p>I usually create a jquery object with the template string I have. Ex.: </p>

<pre><code>var template = "&lt;div&gt;&lt;div class='itenToRemove'&gt;REMOVE!&lt;/div&gt;&lt;div&gt;DO NOT REMOVE!&lt;/div&gt;&lt;/div&gt;"

var $elementToAppend = $(template);
</code></pre>

<p>But sometimes I need to remove some part of the element, like</p>

<pre><code>$elementToAppend.remove('.itenToRemove')
</code></pre>

<p>But it does not work! Why not? Appearently, only already inserted elements on DOM works with the remove method.</p>

<p>I have created a jsFiddle that illustrates my problem: <a href="https://jsfiddle.net/raphaeldovale/mz6Lrrbh/1/" rel="nofollow">https://jsfiddle.net/raphaeldovale/mz6Lrrbh/1/</a></p>