Question 246564 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular – Remove a div block from an array of blocks

I have a block of html divs.

  <div class="my-div-1">
    <div class="my-div-2">
      <div class="my-div-3">
        <p>Hello World</p>
      </div>
    </div>
  </div>

Among this block there is a div with the class my-div-2. How can I remove this, but at the same time, the divs with class my-div-1 and class my-div-2 should remain. It should look like the one shown below.

  <div class="my-div-1">
      <div class="my-div-3">
        <p>Hello World</p>
      </div>
  </div>

Important: It is necessary to do this in such a way that the reference to the object my-div-1 is not lost.

Tags:

2

Answers


  1. 0

    You can do something like this:

    <div class="my-div-1" ngIf="myFlag">
    <div class="my-div-2">
      <div class="my-div-3">
        <p>Hello World</p>
      </div>
    </div>
</div>
  
<div class="my-div-1" ngIf="!myFlag">
      <div class="my-div-3">
        <p>Hello World</p>
      </div>
</div>

    Based on myFlag, you’d have my-div-2 in the html.

    Login or Signup to reply.
  2. 0

    How about this.
    In the template:

    <div #block class="my-div-1">
  div 1
  <div class="my-div-2"> 
    div 2
    <div class="my-div-3"> 
      div 3
    </div>
  </div>
</div>

    and in component:

        @ViewChild('block', {read: ElementRef, static: true}) block!: ElementRef; 
  private readonly renderer = inject(Renderer2);

  ngOnInit(): void {
    const childrenNodes = [...this.block.nativeElement.children];
    const queredNode = this.queryForInnerNode(childrenNodes);
    if(queredNode){
      const parentOfQueredNode = this.renderer.parentNode(queredNode);
      const innerContent = queredNode.children;
      this.renderer.removeChild(parentOfQueredNode, queredNode);
      this.appendExtractedContent(parentOfQueredNode, [...innerContent]);
    }
  }
  queryForInnerNode(childNodes: any): any | undefined{
    let queredNode: any | undefined = undefined;
    childNodes.forEach((childNode: any) => {
      console.log(childNode.className === 'my-div-2' )
      queredNode = childNode.className === 'my-div-2' 
     ? childNode 
     : this.queryForInnerNode([...childNode.childNodes]);
    });
    return queredNode;
  }

  appendExtractedContent(parentNode: any, nodes: any[]) : void {
    nodes.forEach((node) => {
      this.renderer.appendChild(parentNode, node);
    })
  }

    You get the most outer element with

     @ViewChild('block', {read: ElementRef, static: true}) block!: ElementRef;

    Next you get children nodes with:

    const childrenNodes = [...this.block.nativeElement.children];

    and you search through the nodes tree with:

     queryForInnerNode(childNodes: any): any | undefined

    If element was found you get the contet of the node and manipulate the DOM with renderer service.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search