javascript - 动态删除按钮

Question

在此fiddle ，在约会选项卡下，有一个添加计时按钮。单击此按钮时，会添加一个新行以及另一个添加计时按钮。但我不想要另一个添加计时按钮，所以我做了这个 fiddle

添加了上课时间

<button class="btn btn-primary timing" type="button" data-bind="click: $parent.addSlot" value="Add">Add Timing</button>

和在js中

self.addSlot = function () { 
    //self.schedules.push(new Model.Schedule(null));
    console.log('added');
    self.doctor.schedules.push(new Schedule(null));
    $('.timing:last').hide();
    };

现在上述 fiddle 中的问题是有一个 JSON，因此最初只添加了一个添加计时按钮，但如果 JSON 为 2，则添加 2 个添加计时按钮，如下所示 fiddle

那么任何人都可以告诉我如何只使用“添加计时”按钮。

Answer 1

您可以将Add Timing 按钮移到表外并访问$root 上下文而不是$parent 上下文

<!-- ... -->
</table>

<button class="btn btn-primary timing" type="button" data-bind="click: $root.addSlot" value="Add">Add Timing</button>

这样，添加计时按钮就不会在每个条目中重复。您还必须删除

$('.timing:last').hide();

否则，该按钮将在您第一次添加时隐藏。

查看更新JSFiddle

更新:

根据Binding context , $data 在这种情况下同样有效

data-bind="click: $data.addSlot"

查看另一个JSFiddle