Hide and show div effect

You can use the not() method ( info ) to get those elements that are of one type and not of another. In this case you would select all the divs minus those with the class cajasLetras and you would add the click event to remove the class to the class elements cajasLetras with removeClass() ( removeClass info )

(function($){
$(document).ready(function(){
    $(".cajasLetras").click(function () {
        $('.cajasLetras').addClass('alphabetical');
        $('.Linearicons-Free-text-format').addClass('alphabetical');
    });
    $(".cajasLetras").focusout(function(){
      $('.cajasLetras').removeClass('alphabetical');
    });
});
})(jQuery)

.alphabetical{
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cajasLetras" tabindex="-1">Div cajasletras</div>
<div class="otraClase">Div distinto de cajasletras</div>

Edit

I update with what the OP requests. A simple option to remove the class when you click on any element other than div cajasLetras is to make div focusable with tabindex="-1" and then use the event focusout in div .

  

A tabindex="- 1" value removes the element from the default navigation   flow (i.e., a user can not tab to it), but it allows it to receive   programmatic focus, meaning focus can be set to it from a link or with   scripting. ** This can be very useful for elements that should not be   tabbed to, but that may need to have focus set to them.

Here more info on tabindex="-1"

I use this function to hide and show an item, in this case it is a counter. I use the events onblur() and onfocus() offered by the element <input> (It also applies to a textarea, as it is in this case). Try it and adapt it to your project, it may be useful if you do not comment, greetings!

function ocultarContador(){
	  				
	  	document.getElementById('ocultar').style.display = "none";
}

function mostrarContador(){

	    document.getElementById('ocultar').style.display = "inline-block";
}

/*No tomes mucho en cuenta este css*/
.ocultar{
  display: none;
  
}

.ocultar input{
 border-style: solid;
 border-color: black;
 border-width: 2px;
 border-radius: 5px;
 width: 12%;
 height: 5mm;
 color: black;
 padding-left: 1mm;
}
.form-group{
  font-family: 'Segoe UI' !important;
}

<div class="form-group">
	<label class="label_contact">¿En qué podemos ayudarte?</label>
	<br><br>
	<textarea name="comment" id="com" required="required" onfocus="mostrarContador(this)" onblur="ocultarContador(this)" title="Completa este campo"></textarea>
									
	<div id="ocultar" class="ocultar">
	  &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</label>
    <input disabled="disabled" maxlength="4" value="1500" id="contador">
	 </div>
</div>	

The theme is the events onblur() and onfocus() , which work the way you do. Clicking on any other side of the page removes a value from an element, in the example that it poses hidden and shows an element. In your case you would have to do the opposite to change the style you want to modify when you click on another side of the site, respectively.