javascript - remove() on img with ng-src, border remains?

Question

我有一些 ng 重复的图像。

<img ng-src="{{::data.image}}" />

CSS:

.thumbnailImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  border: 1px solid lightslategrey;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white; /* in case of png */
  }

部分 {{data.image}} 为空。我想删除那些。

<img ng-src="{{::data.image}}" onerror="this.remove()" />

但是，当我这样做时，图像上的 1px 边框仍然存在吗？

在此之前，我有一个 ng-if 语句 (ng-src != null)，但我发现它在 angular watchers 中太昂贵了。

https://jsfiddle.net/8ykrkc3c/

Answer 1

您的 onerror 处理程序不正确。请注意，它不再是 Angular 属性，因此您不能使用 angular.element.prototype.remove方法。相反，您需要使用良好的旧 native DOM 方法，在您的情况下 removeChild :

<img class="asd" ng-src="{{::data.image}}" onerror="this.parentNode.removeChild(this)" />

演示: https://jsfiddle.net/8ykrkc3c/2/