Obtain item with point in class name with JQuery

The problem is here (in the slash):

$('.fancybox\.image').remove();

Change it by .fancybox\.image with double slash.

The rest of the code is fine, what happens is that the string '\.' in JavaScript becomes just '.' because \ is the escape character, and what you want is that the selector receives \. .

Only enclose in single or double quotes, depending on which you use to define the selector , the value of the attribute class . This is:

$("[class='fancybox.iframe']").remove();

$(function(){
  $('button').on('click', function(){
    /* No funciona */
    // $('.fancybox\.image').remove();
    $("[class='fancybox.iframe']").remove();
  });
});

.fancybox\.iframe {
  color: white;
  background-color: red;
}

.fancybox\.image {
  color: white;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.iframe">Estilo iframe</a>
  </li>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.image">Estilo imagen</a>
  </li>
</ul>

<button>Borrar: fancybox.iframe</button>

It turns out that Jquery in version 3.0 has added a new method called escapeSelector. What it allows is to be able to make selections of elements with characters typical of the css selection operators.

Its use would be something like this

$( "#" + $.escapeSelector( "abc.def" ) )

You have more information here link