Question

我帮助创建一个框架，我需要创建一个与cp-if不同的指令cp-show，因为在这种情况下，不能只将元素的可见性更改为“无”＃39} ;刚刚显示之后，在cp-if我需要创建并删除DOM对象

import {MapDom} from '../map-dom';
import {Common} from '../../common';

export class CPIf {

 private element: any;
 private map: MapDom;
 private attribute;
 private initialDisplay;

 constructor(_element: HTMLElement, _map: MapDom) {
     this.element = _element;
     this.map = _map;
     this.attribute = Common.getAttributeCpIf(this.element);

     Common.getScope(this.element).$on('$onInit', () => this.init());
 }

 init() {
     try {
         Common.evalInContext(this.attribute, Common.getScope(this.element).scope) ? this.show() : this.hide();
     } catch (ex) {
         this.hide();
     }
 }

 hide() {
     this.element.remove()
 }

 show() {
     console.log(this.element);
 }

}

我可以删除DOM上的对象，但是当操作转到show()函数时，可以恢复。对不起，如果一个人无法很好地解释我的想法

Answer 1

我可以像这样使用createComment()来解决

import {MapDom} from '../map-dom';
import {Common} from '../../common';

export class CPIf {

 private element: any;
 private map: MapDom;
 private attribute;
 private initialDisplay;
 private elementComment;

 constructor(_element: HTMLElement, _map: MapDom) {
     this.element = _element;
     this.initialDisplay = this.element.style.display || 'block';
     this.map = _map;
     this.attribute = Common.getAttributeCpIf(this.element);
     this.elementComment = document.createComment('cpIf ' + this.attribute);
     Common.getScope(this.element).$on('$onInit', () => this.init());
 }

 init() {
     try {
         Common.evalInContext(this.attribute, Common.getScope(this.element).scope) ? this.show() : this.hide();
     } catch (ex) {
         this.hide();
     }
 }

 hide() {
     this.element.replaceWith(this.elementComment);
 }

 show() {
     this.elementComment.replaceWith(this.element);
 }

}

Answer 2

我不确定你的解决方案，但我最近遇到了这个问题并以不同的方式解决了它。

虽然linter无法识别类型.remove()上的方法HTMLElement方法，但它确实识别出.removeChild()，所以我最终创建了一个直到祖父元素的族链，然后在其子元素上调用removeChild。它看起来像这样：

（if语句用于防止linter抱怨该对象可能为null）

if (listItemElement && listItemElement.parentNode && listItemElement.parentNode.parentNode) { listItemElement.parentNode.parentNode.removeChild(listItemElement.parentNode); }

不是一个漂亮的解决方案，但它可以工作，我想在某些时候，linter将识别更简单的.remove()方法，这将简化逻辑。

Answer 3

您可以使用removeChild（）从parentNode中删除DOM元素。 remove（）在IE浏览器上不起作用，因此请使用removeChild（），它将在所有浏览器上起作用。 element.parentNode.removeChild（this）;

删除并添加DOM上的元素

3 个答案: