根据knockout模板中$ index的值删除div

时间:2017-05-30 16:37:47

标签: knockout.js knockout-templating

以下是我的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();
};

但这是删除第一个模板。

1 个答案:

答案 0 :(得分:0)

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

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

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

self.arr.splice(indexToRemove, 1);