CODEWITHSUNDEEP
javascriptknockout.jsknockout-2.0
SpringLearner
SpringLearner

Reputation: 13854

removing button dynamically

in this fiddle,under appointments tab,there is a add timing button.When this button is clicked then a new row is added along with another add timing button.But I did not want another add timing buttons so i made this fiddle

added a class timing 

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

and in js

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

now the problem in the above fiddles there is one JSON so initally only one add timing button is added but if the JSON is 2 then 2 add timings button are added like this fiddle

so can any body please tell me how will I have only on add timings button.

Upvotes: 0

Views: 54

Answers (1)

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

You can move the Add Timing button outside the table and access the $root context instead of the $parent context 

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

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

This way the Add Timing button will not be duplicated with every entry. You must also remove the 

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

Otherwise, the button will be hidden on your first adding.

See updated JSFiddle

Update:

According to Binding context, $data works equally well in this case 

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

See another JSFiddle

Upvotes: 2

Related Questions