javascript - Access div in nested meteor template -

i'm trying access or more precise remove class inside nested template parent template. here how code structured.

parent template

<template name='paymenttemplate'>   <div class="progress-wrapper">      {{>progressbar }}   </div>  </template> 

child template

<template name="progressbar"> <div class="progress">       <div class="checkoutprg progress-bar progress-bar-success" role="progressbar" aria-valuenow="25"          aria-valuemin="0" aria-valuemax="100" style="width: 25%;">         checkout     </div>     <div class="deliveryprg progress-bar progress-bar-danger " role="progressbar" aria-valuenow="25"          aria-valuemin="0" aria-valuemax="100" style="width: 25%;">         delivery     </div>     <div class="paymentprg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"          aria-valuemin="0" aria-valuemax="100" style="width: 25%;">         payment     </div>     <div class="confirmationprg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"          aria-valuemin="0" aria-valuemax="100" style="width: 25%;">         confirmation     </div>   </div> </template> 

so, aim remove class progress-bar-danger each respective div , replace progress-bar-success on fly. ideas how accomplish that?

assuming have function triggers when progressbar complete, can use simple jquery so:

$('.deliveryprg').removeclass('progress-bar-danger'); $('.deliveryprg').addclass('progress-bar-success'); 

this can done in either parent template (if that's completion function runs), or in sub template, or in other template unrelated. requirement nested template should have been rendered.

when directly selecting dom elements, there's no requirement must done template renders element. dom element doesn't know template rendered :-)