如何在同一页面上获取多个模式

Question

I am trying to get multiple modals to work on the same page and am having some trouble.

Essentially, I want to know is, why does this work:

<ul class="list">
  <li class="item">
    1
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      one
    </div>
  </li>
  <li class="item">
    2
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      two
    </div>
  </li>
  <li class="item">
    3
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      three
    </div>
  </li>
</ul>

-

var open = document.querySelectorAll( '.open' );

for ( y=0; y<open.length; y++ ) {
    open[y].addEventListener( 'click', function() {

        var modal = this.parentNode.querySelector( '.modal' );
        modal.classList.remove( 'hide' );
    });
}


var close = document.querySelectorAll( '.close' );

for ( x=0; x<close.length; x++ ) {
    close[x].addEventListener( 'click', function() {
        this.parentNode.classList.add( 'hide' );
    });
}

But this doesn't:
(notice the lack of the button.open , now the "open" event is binded to li.item ... opening still works, but closing does not)

<ul class="list">
  <li class="item">
    1
    <div class="modal hide">
      <button class="close">close</button>
      one
    </div>
  </li>
  <li class="item">
    2
    <div class="modal hide">
      <button class="close">close</button>
      two
    </div>
  </li>
  <li class="item">
    3
    <div class="modal hide">
      <button class="close">close</button>
      three
    </div>
  </li>
</ul>

-

var item = document.querySelectorAll( '.item' );

for ( i=0; i<item.length; i++ ) {
    item[i].addEventListener( 'click', function() {

        var modal = this.querySelector( '.modal' );
        modal.classList.remove( 'hide' );
    });
}

var close = document.querySelectorAll( '.close' );

for ( x=0; x<close.length; x++ ) {
    close[x].addEventListener( 'click', function() {
        this.parentNode.classList.add( 'hide' );
    });
}

Answer 1

 var item = document.querySelectorAll( 'li' ); for ( i=0; i<item.length; i++ ) { item[i].addEventListener( 'click', function() { // this.parent will give li and then find modal var modal = this.querySelector('.modal') modal.classList.remove("hide"); }); } var close = document.querySelectorAll( '.close' ); for ( x=0; x<close.length; x++ ) { close[x].addEventListener( 'click', function(e) { // this.parentNode will give directly modal var modal = this.parentNode modal.classList.add("hide"); // Stop child to parent bubbling e.stopPropagation(); }); } 

 .hide{ display: none; } li{ cursor: pointer; } 

 <ul class="list"> <li class="item"> 1(click to open) <button class="open">open</button> <div class="modal hide"> <button class="close">close</button> one </div> </li> <li class="item"> 2(click to open) <button class="open">open</button> <div class="modal hide"> <button class="close">close</button> two </div> </li> <li class="item"> 3(click to open) <button class="open">open</button> <div class="modal hide"> <button class="close">close</button> three </div> </li> </ul>