Select all elements with class name start by specific string by jquery
<p>This is my HTML DOM:</p>

<pre><code>&lt;div id="d1" class="Addable"&gt;&lt;span class="yak-bak-nak vok-do-maria"&gt; &lt;p&gt;Goola1&lt;/p&gt;
&lt;span&gt;volaa&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

&lt;div id="d2" class="Addable"&gt;&lt;span class="yak-bak-val vok-do-maria"&gt; &lt;p&gt;Goola2&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;

&lt;div id="d3" class="Addable"&gt;&lt;span class="vok-do-maria yak-bak-nak"&gt; &lt;p&gt;Goola3&lt;/p&gt;&lt;/div&gt;

&lt;div id="d4" class="Addable"&gt;&lt;span class="vok-do-maria yak-bak-nak"&gt; &lt;p&gt;Goola4&lt;/p&gt;&lt;/div&gt;

&lt;input type="button" class="Doop" value="Do" /&gt;
</code></pre>

<p>So I want to remove all <code>divs</code> that class names start with "yak-bak" that means all of the above.</p>

<p>so I try this script:</p>

<pre><code>$('.Doop').click(function () {

    $('span[class|="yak-bak"]').parent('div').remove();
});
</code></pre>

<p>but just d1 and d2 remove and d3, d4 remain because the <code>yak-bak</code> class come as second also I try this:</p>

<pre><code>$('.Doop').click(function () {

    $('span[class^="yak-bak"]').parent('div').remove();
});
</code></pre>

<p>So what is your suggestion? where is the problem?</p>
