knockout.js - 根据淘汰模板中 $index 的值删除一个 div

Question

以下是我的html代码：

<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>

我有一个删除按钮：

<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>

我想删除tempDiv基于 的值$index，即，如果为第三个模板按下删除按钮，它应该只删除第三个模板。

目前我正在尝试这个：

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

但这是删除第一个模板。

Answer 1

我在模板数组中使用了基于索引的添加：

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

然后使用索引将其从模板数组中删除：

self.arr.splice(indexToRemove, 1);