remove class to sibling of elemnt jquery

Question

I have this Jquery function, with a filter that adds a class named selected to the filter by click and shows all that data filter tags of the selected filter.

I want to define that if the sibling of the chosen element has a class named selected, that class needs to be removed from the rest and has to be added to only the selected element.

Function Script

 (function ($) {

"use strict";

$.fn.filter = function (options) {

    var defaults = {
        nav: '[data-filter]' //
    }

    var $this = this,
        settings = $.extend(defaults, options),
        $target = $(settings.target),
        selected = [];

    return this.each( function() {

        var $element = $(this);

        $(settings.nav).each( function() {

            $(this).click( function(event) {

                // add selected class
                $(this).toggleClass('selected');

                // manipulate selected terms array
                if ($.inArray($(this).data('filter'), selected) < 0 ) {
                    selected.push($(this).data('filter'));
                } else {
                    var index = $.inArray($(this).data('filter'), selected);
                    selected.splice(index, 1);
                }

                // show/hide elements
                $element.find('[data-filter-tags]').each( function() {

                    var terms = $(this).data('filter-tags').split(','),
                        show = null;

                    for (var i=0;i<selected.length;i++) {
                        show = ($.inArray(selected[i], terms) >= 0 && show !== false);
                    }

                    if (show || selected.length == 0) {
                        $(this).fadeIn();
                    } else {
                        $(this).fadeOut();
                    }
                });

                event.preventDefault();

            });

        });

    });

};

  }(jQuery));

HTML

  <div id="tags">
  <div id="cities" data-activeclass="selected">
<a href="#" class="city" data-filter="telaviv">תל אביב</a>
<a href="#" class="city"   data-filter="ramatgan">רמת גן</a>
    <a href="#" id="city"  data-filter="city">הכל</a>
    <div>
</br>
<a href="#" data-filter="full">משרה מלאה    </a>
<a href="#" data-filter="part">משרה חלקית</a>
        <a href="#" data-filter="time">הכל</a>
</br>
  <a href="#" data-filter="sec">מזכירות</a>
       <a href="#" data-filter="op">הפעלה</a>
                <a href="#" data-filter="kind">הכל</a>
       </br>
   </nav>
     <div id="filter">
     <div class="block" style="background: green" data-filter- 
    tags="time,kind,city,telaviv,full,sec">תל אביב משרה מלאה מזכירות</div>
   <div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,full,sec">רמת גן מלאה מזכירות</div>
<div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,part,op">רמת גן חלקית הפעלה</div>
    <div class="block" style="background: blue" data-filter- 
     tags="time,kind,city,telaviv,full,op">תל אביב מלאה הפעלה</div>
            <div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,part,sec">רמת גן חלקית מזכירות</div>
  </div>

Answer 1

I want to define that if the sibling of the choosen elemnts has class named "selected" remove the class from them and add it only to the selected element.

If clicking the element selects it and deselects all of its siblings, then in your click handler:

$(this).addClass("selected").siblings().removeClass("selected");

Simplified live example:

$("[data-filter]").on("click", function() {
    $(this).addClass("selected").siblings().removeClass("selected");
});

[data-filter] {
  border: 1px solid blue;
}
.selected {
  background-color: yellow;
}

<div>
  <span data-filter="1">one</span>
  <span data-filter="2">two</span>
  <span data-filter="3">three</span>
  <span data-filter="4">four</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If clicking the element toggles it, we want toggleClass (which you have) but the rest is the same:

$(this).toggleClass("selected").siblings().removeClass("selected");

...since the .siblings().removeClass("selected"); part just won't do anything if the current element was the one that was selected.

Simplified live example:

$("[data-filter]").on("click", function() {
    $(this).toggleClass("selected").siblings().removeClass("selected");
});

[data-filter] {
  border: 1px solid blue;
}
.selected {
  background-color: yellow;
}

<div>
  <span data-filter="1">one</span>
  <span data-filter="2">two</span>
  <span data-filter="3">three</span>
  <span data-filter="4">four</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>