Este é o meu DOM HTML:

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

<div id="d2" class="Addable"><span class="yak-bak-val vok-do-maria"> <p>Goola2</p></span></div>

<div id="d3" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola3</p></div>

<div id="d4" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola4</p></div>

<input type="button" class="Doop" value="Do" />
</code>

Então eu quero remover tudodivs os nomes das classes começam com "yak-bak", o que significa todos os itens acima.

então eu tento este script:

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

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

mas apenas d1 e d2 remover e d3, d4 permanecem porque oyak-bak classe vem como segundo também eu tento isso:

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

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

Então qual é a sua sugestão? Onde está o problema?