Remove a div based on the value of $index in knockout template

Question

The following is my html code:

<div id="tempDiv" class="oj-flex" data-bind="attr: {index:$index()}">
   <div class="oj-flex-items-pad oj-sm-1 alignCenter " > + </div>
   <div class="oj-flex-items-pad oj-sm-11 " >
      <div class="oj-padding  oj-panel-alt2" style="border:1px solid #e8e8e8;border-radius:5px;">
         <div class="oj-flex">
            <div class="oj-sm-4">
               <div class="padding10">
                  <select id="selectListCondition" data-bind="ojComponent: {component: 'ojSelect',
                     rootAttributes: {style:'max-width:10em'}}">
                     <option value="AND">AND</option>
                     <option value="OR">OR</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

I have a delete button:

<div class="padding10 floatRight">
  <button id="deleteBtn" class="margin-left3" data-bind="click: function(event, ui) {$parent.btnDeleteConditionClick(event, ui, $element, $index());}, ojComponent: {component: 'ojButton', label: 'Delete Condition'}">
  </button>
</div>

I want to delete the tempDiv based on the value of $index, i.e, if the delete button is pressed for the 3rd template, it should delete the 3rd template only.

Currently I am trying this:

self.btnDeleteConditionClick = function(event, ui, element, index) {
  $('#tempDiv').remove();
};

But this is deleting the 1st template.

Answer 1

I used index based addition to the template array:

self.arr.push({ index: ++globalIndex });

And then used the index to remove it from the template array:

self.arr.splice(indexToRemove, 1);