jQuery - .on("click") hide each siblings

Question

I am having some trouble hiding each sibling objects next to clicked one. The simple $(".hider").hide(); does not work for me, cause I have multiple objects and I only want to hide those siblings next to clicked one, other ones needs to get that hider class so users cannot interact with it again.

$(document).on('click', '.hider', function() {
  console.log("clicked");
  var obj = $(this);
  obj.parent("ul").children("span.hider").each(function() {
    $(this).removeClass("hider");
    console.log($(this));
  });
});

.c-pointer {
  cursor: pointer;
}
li a span {
  color: red
}
li a span.hider {
  color: #000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="emoticon">
  <div class="sb-social">
    <ul class="c-default">
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
    </ul>
  </div>
</div>
<!-- -->
<hr/>
<!-- -->
<div class="emoticon">
  <div class="sb-social">
    <ul class="c-default">
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
    </ul>
  </div>
</div>
<!-- -->
<hr/>
<!-- -->
<div class="emoticon">
  <div class="sb-social">
    <ul class="c-default">
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
      <li class="enabled">
        <a class="c-pointer">
          <span class="hider">Click on me to hide All</span>
        </a>
      </li>
      <!-- -->
    </ul>
  </div>
</div>
<!-- -->
<hr/>

Does anybody experienced this before?

jsFiddle here

Answer 1

You have a couple problems with your code. First of all, .parent() is only going to find direct parent elements, and your ul is much higher in the hierarchy. You can use .parents() instead. Secondly, you won't want to use children for the same reason, find will work instead. As @Igor suggested though, you can also couple with .not(obj) to filter the list instead of a condition.

obj.parents("ul").find("span.hider").not(obj).each(function(i, e) {
  $(e).removeClass("hider");      
});

You could also use obj.siblings() to get its direct siblings, but this won't work on the span, as it has no siblings.

I've updated your jsfiddle with one working example.

https://jsfiddle.net/oqgzkw3p/3/

Edit: Added not from @Igor.

Answer 2

$(document).on('click', '.hider', function() {
  var obj = $(this);
  obj.closest("ul.c-default").find(".hider").not(obj).removeClass("hider");
});

Answer 3

$(document).on('click', '.hider', function() {
  console.log("clicked");
  var obj = $(this);
  obj.siblings().hide() //You can use hide, or addClass('hider') or whatever you want
}