Get innerHTML for a parent parent in JavaScript

Question

I have this code:

   <div class="places-item">
      <div class="places-item-img"></div>
      <div class="places-item-header">
         <h2>TEST</h2>
         <div class="places-item-header-add">ADD</div>
      </div>
   </div>

   document.querySelector('.places-item-header-add').addEventListener('click',function(){
      var getHTML = this.outerHTML;
      document.querySelector('body').innerHTML = getHTML
   });

The current code only displays div.places-item-header-add, and I want the entire div.places-item to be displayed. Is that possible?

Can you elaborate a bit as to why you're trying to replace the entire HTML `body` with content from a single `div`? — esqew, Mar 10 '20 at 16:11
why not just replace .places-item-header-add with places-item? — DCR, Mar 10 '20 at 16:14
Possible duplicate of [Getting the parent div of element](https://stackoverflow.com/questions/6856871/getting-the-parent-div-of-element) — esqew, Mar 10 '20 at 16:16

score 1 · Answer 1 · answered Mar 10 '20 at 16:15

1

I think this is what you are asking for:

document.querySelector('.places-item-header-add').addEventListener('click',function(){
    document.querySelector('body').innerHTML = this.parentElement.parentElement.outerHTML;
});

answered Mar 10 '20 at 16:15

jeprubio

17,312
5
45
56

Get innerHTML for a parent parent in JavaScript

1 Answers1