como eliminar un elemento dependiendo de la class

[sergi_multimedia]

Hola amig@s, quiero eliminar una etiqueta span en caso de que haya una coincidencia. Os muestro mi HTML y luego mi código Javascript/jQuery.

Código HTML:

<ul class="list-pages">
 <span class='page_item page-item-686'></span>
 <span class='page_item page-item-693'></span>
 <span class='page_item page-item-690'></span>
 <span class='page_item page-item-688'></span>
 
 <li class="page_item page-item-686 page_item_has_children"></li>
</ul>
 

Código Javascript:

var i,j;
var numList = $('ul.list-pages li').length;
var numSpan = $('ul.list-pages span').length;
var spanClass = new Array();
var liClass = new Array();
 
for(i=0; i<= numSpan; i++){
 for(j=0; i<= numList; i++){
  spanClass[i] = $('ul.list-pages span:eq('+i+')').attr('class');
  liClass[j] = $('ul.list-pages li:eq('+j+')').attr('class');
  if(spanClass[i] != liClass[j]){
   $('ul.list-pages span:eq('+i+')').css('display', 'none');
  }
 }
}
 

Mi elemento <li> dentro de su clase tiene una numeración que es la de 686, y de los 4 <span> que hay con cada uno con una numeración hay uno que coincide con la numeración de <li>. Pues bien, los <span> que no coincidan quiero aplicarles el display:none del css, pero no acabo de encontrar la solución.

Es decir, de los 4 <span> que hay solo puede quedar uno, el que coincida la numeración de la clase con la del <li>.

¿Me podéis ayudar?

Gracias de antemano.