We Keep Coding

function to remove/delete template from the DOM

I've been working on this for a few hours and I can't seem to figure it out.
I am trying to get this function to remove the template when the button is clicked
here is the html of the template.
<script id="movieTemplate" type="text/template">
<div class="row my-3 t-3 card-movie ">
<div class="col-md-12 mb-4">
<div class="card border-0 shadow">
<img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Title in Template</h5>
<div class="card-genre text-black-50">Genre in Template</div>
<div class="card-year text-black-50">Year in Template</div>
<button type="button" class="btn btn-danger deleteMovie mt-2">Delete</button>
</div>
</div>
</div>
</div>
and this is the function calling that button
function wireHandlers() {
$(".deleteMovie").on("click", onDeleteMovie);
};
and finally the function that should delete the template
function onDeleteMovie() {
$(".card-movie").remove();
};
I know there is probably a shorthand way to do this but I would really like to keep it as simple as possible. Any help is appriciated! :D

You could call click directly on the button:
$( ".deleteMovie" ).click(function() {
$(".card-movie").remove();
});
This method is a shortcut for .on( "click", handler )
Documentation for the same is here

You did not attached event because you not executed wireHandlers()
Your class selector was wrong .delete-movie
You have to attach event when document loads. More easy way to do is:
$(document).on("click",".deleteMovie", function(){
$(this).parent().parent().parent().parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row my-3 t-3 card-movie ">
<div class="col-md-12 mb-4">
<div class="card border-0 shadow">
<img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Title in Template</h5>
<div class="card-genre text-black-50">Genre in Template</div>
<div class="card-year text-black-50">Year in Template</div>
<button type="button" class="btn btn-danger deleteMovie mt-2">Delete</button>
</div>
</div>
</div>
</div>
This is best way when data is dynamically added:
$(this).parent().parent().parent().parent().remove();

Selenium - cannot click on an element inside a modal

I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is‌​-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out

As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();

I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...

ngRepeat doesn't display items

We're working on a e-commerce platform at my work and we use AngularJS. Yesterday we put a great amount (200+, in small quantities it works well) of products in the bag and a bug started, some items aren't listed but it is in the HTML when we inspect elements.
The following codes are what we have:
The directive:
class dSacolaItem{
constructor(){
this.restrict = 'EA';
this.templateUrl = 'views/directives/component-sacola-item.html';
this.scope = {
dirParent: '=?dSacolaItem'
};
}}
The template of the items:
<div class="row block-item" ng-repeat="(key, prod) in dirParent.data track by $index">
<div class="col-xs-12 col-sm-4 col-md-6">
<div class="box-img pull-left">
<img class="img-responsive" ng-src="images/photos/50/{{::prod.imagem}}" d-err-src="images/photos/50/0.jpg" alt="{{::prod.descricao_curta}}">
</div>
<div class="box-infos pull-left">
<h5 class="text-uppercase text-primary" ui-sref="main.produto({ idproduto: {{::prod.id_produto}}, descricao: '{{::prod.descricao_link}}' })">{{::prod.descricao_curta}}</h5>
<small>{{::prod.var1 == undefined ? 'Único' : prod.var1}} | {{::prod.var2 == undefined ? 'Único' : prod.var2}} | {{::prod.var3 == undefined ? 'Único' : prod.var3}}</small>
<button class="btn btn-default btn-xs" type="button" ng-click="dirParent.removeItem(prod.id_variacao)">
<span ng-show="dirParent.removing_prod != prod.id_variacao">remover</span><span ng-show="dirParent.removing_prod == prod.id_variacao"><i class="fa fa-refresh fa-spin"></i></span>
</button>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-gift text-center">
<form name="fGift" ng-submit="false" novalidate>
<label class="gift-prod" ng-if="::(dirParent.configs.produto_preco_presente > 0)">
<input type="checkbox" name="presente" ng-model="prod.presente" ng-change="dirParent.setGift( key, prod.presente )">
<div>
<i class="fa fa-gift fa-3x"></i>
<small>PRESENTE</small>
<small>(R$ {{::dirParent.configs.produto_preco_presente | currency: '': 2}})</small>
</div>
</label>
</form>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-qtde" tooltip-placement="left" uib-tooltip="Em estoque: {{::prod.estoque}}" tooltip-enable="prod.estoque == prod.qtde">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('decrement', key)" ng-class="{'disabled': prod.qtde == 1}"><i class="fa fa-angle-down"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('increment', key)" ng-class="{'disabled': prod.estoque == prod.qtde}"><i class="fa fa-angle-up"></i></button>
</div>
</div>
<input class="form-control text-center" type="text" ng-value="prod.qtde" disabled="disabled">
<i class="fa fa-refresh fa-spin refresh-qtde" ng-style="dirParent.value_load[key]"></i>
</div>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>unitário:</span>
<h5 class="text-primary">R$ {{::prod.preco | currency: '': 2}}</h5>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>total:</span>
<h5>R$ {{prod.preco * prod.qtde | currency: '': 2}}</h5>
</div>
I tried to use one-time binding in every place that was possible, but some data needs to be updated...
And finally, how I call the directive:
<div class="shopping-items" d-sacola-item="bag"></div>
I tried to put infinite scroll but it didn't work and also went through a lot of articles trying to fix this but nothing helped.
Some prints of the problem (look to the scroll)
Begin of displayed data (scroll is in 1/3 of the page)
Item not displayed but in the HTML
Anyone with the same problem? I don't know anymore what I should do to fix it.
[add 1]: It seems only browsers that use chromium (Chrome, Opera...) have the issue. Firefox, IE, edge and wow safari 5.1 (2012 version) show everything with some hard work, but at least they display data correctly.

Buttons inside bootstrap well don't work

So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!

Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.

Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle

<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>

Slow performance rendering in client templating engine (Rivets.js)

I'm rendering an array of of about 1000 objects. The html bindings are very heavy (see below). It's taking about 5 seconds to rivets.bind().
Any suggestions on improving performance? I don't think I can afford to bind in chunks as I'm using a pagination/sorting library in conjuction that needs the entire array in order to sort/paginate.
Here is my HTML for each object (tracks):
<div rv-each-track="tracks" class="track-row row has-hover" rv-download-url="track.direct_path.download_path" rv-api-key="track.track.apikey" rv-media-url="track.direct_path.audio" rv-track-title="track.track.name" rv-wave-data="track.direct_path.wave_default" rv-wave-progress-data="track.direct_path.wave_progress">
<div class="mobile-margin">
<div class="track-hover desktop-only">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{track.track.name}<span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></div>
<div class="hover-links">
<div class="item hamburger holds-tooltip main-hover-item icon-hamburger" data-toggle="tooltip" data-original-title="Alternate Versions"></div>
<div class="item share main-hover-item popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist icon-playlist-add popover-button holds-tooltip main-hover-item" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist"></div>
<div class="item download icon-download holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Download Track"></div>
<div class="item cart last icon-cart-plus holds-tooltip main-hover-item popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item remove last icon-x holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Remove Track" rv-data-delete-track-id="track.track.apikey"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="track-variations">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-data-track-id="track.track.apikey" rv-api-key="variation.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name" rv-wave-data="variation.direct_path.wave_default" rv-wave-progress-data="variation.direct_path.wave_progress">
<div class="col-md-8 variation-title">{variation.track.name}</div>
<div class="col-md-2 variation-length">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title"><a class="track-link">{variation.track.name}</a></div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" rv-data-media-url="track.direct_path.download_path" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>
</div>
<div class="col-md-4 first-title desktop-only"><a class="offset-left track-title-link track-link" href="">{track.track.name}</a><span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></span></div>
<div class="col-md-3 genre desktop-only"><span class="offset-left">{track.genre}</span></div>
<div class="col-md-2 mood desktop-only"><span class="offset-left">{track.mood}</span></div>
<div class="col-md-2 canvas desktop-only"><div class="mini-wave offset-left" rv-style-background-image="track.direct_path.wave_canvas"></div></div>
<div class="col-md-1 last-title duration desktop-only"><span>{track.track.tracklength}</span></div>
<div class="col-md-1 last-title last-played pull-right desktop-only">{track.lastPlayed}</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{track.track.name}</div><span rv-class="track.track.staff_pick | staffPickClass"></span></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
<div class="pull-right mobile-only mobile-button mobile-variations-button icon-hamburger"></div>
</div>
<div class="is-staff-pick hidden">{track.track.staff_pick | staffPickValue}</div>
<div class="instrument hidden">{track.instrument}</div>
<div class="industry hidden">{track.industry}</div>
<div class="tempo hidden">{track.tempo}</div>
<div class="aggregated-terms hidden">{track.tag_list} {track.track.name}</div>
<div class="date-last-played hidden">{track.dateLastPlayed}</div>
<div class="clearfix"></div>
</div>
<div class="track-variations mobile-only">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-api-key="track.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name">
<div class="mobile-margin">
<div class="col-md-8 variation-title desktop-only">{variation.track.name}</div>
<div class="col-md-2 variation-length desktop-only">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{variation.track.name}</div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{variation.track.name}</div></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
</div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>

Do not do rivets events example: rv-click which will degrade your performance because you will be passing your entire view for the callback method.
DO not pass entire view to the rivets.bind()
pass only the necessary models and do it.
If it is possible first bind 100 elements and then if user scrolled half of the page bind again 100 elements which will improve your performance for sure.
I did the below changes in binders to make it run faster even in lower end mobile devices as well.
rivets.binders.text = function(el, value) {
if (el.textContent != null) {
return el.textContent;
}
else {
return el.innerText;
}
};

I've come to the the conclusion that yes, there are minor performance improvements that I could potentially implement for binding 1000+ (large html) objects to the DOM using Rivets. However, the root issue is the fact that I'm trying to bind 1000+ rivets into the DOM at once and that is going to be inherently slow using any technique (I've tested with React, jQuery, Rivets, etc...).
The solution to this problem is to simply find another way. I've chosen to pre-render the html on the server and serve it up through an API response. This cut the page load time down from ~5s to ~1s.