JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<ul>
	<li class="archLi">Row 1</li>
	<li class="archLi">Row 2</li>
	<li class="archLi">Row 3</li>
	<li class="archLi">Row 4</li>
	<li class="archLi">Row 5</li>
	<li class="archLi">Row 6</li>
	<li class="archLi">Row 7</li>
	<li class="archLi">Row 8</li>
	<li class="archLi">Row 9</li>
	<li class="archLi">Row 10</li>
	<li class="archLi">Row 11</li>
	<li class="archLi">Row 12</li>
	<li class="archLi">Row 13</li>
	<li class="archLi">Row 14</li>
	<li class="archLi">Row 15</li>
	<li class="archLi">Row 16</li>
	<li class="archLi">Row 17</li>
	<li class="archLi">Row 18</li>
	<li class="archLi">Row 19</li>
	<li class="archLi">Row 20</li>
</ul>

JavaScript

var count = $('.archLi').length,
		showN = 12,
		hideN = count - showN;

alert(count);

$('.archLi').click(function(event) {
	alert( $(this).index() + 1 );
	
	var elemN = $(this).index() + 1;
	
	if ( elemN < hideN) {
  	$(this).remove();
  }
});