title: jQuery .Click event trigger goes beyond input element that it's assigned to
body: <p>I have this problem where an input <code>.remove-button</code> is not working as intended. When I click on the div(<code>.tag</code>) that contains <code>.remove-button</code> or around it, the <code>.remove-button</code> code will trigger, even though it was only set to it. Also for some reason, the code seems to be running multiple times deleting everything in the array</p>
  <p>edit:
  it seems to be triggering the click when I click anywhere inside the <code>#course-tag-container</code>.
  <code>course_splice</code>.</p>
  <p>script:</p>
  <pre class="lang-js prettyprint-override"><code>//...
  jQuery(&quot;input.remove-button&quot;).click((event)=&gt;{
          //find course text
              course_inv.splice(        course_inv.indexOf(jQuery(event.target).closest(&quot;.tag&quot;).find(&quot;.course&quot;).text()), 1
                             );
  
                event.target.closest(&quot;.tag&quot;).remove();
          });   
  //...
  </code></pre>
  <p>html for tag:</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;div class=&quot;tag&quot;&gt;
      &lt;div class=&quot;course-wrap&quot;&gt;
        &lt;p class=&quot;course&quot;&gt;LEED v4 Project Management&lt;/p&gt;
        &lt;div class=&quot;input-wrapper&quot;&gt;
          &lt;input type=&quot;image&quot; name=&quot;removeButton&quot; 
          src=&quot;http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg&quot; 
          alt=&quot;remove button&quot; class=&quot;remove-button&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>screenshot of what it looks like:
  <a href="https://i.stack.imgur.com/jR5G7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jR5G7.png" alt="screenshot of what it looks like" /></a></p>
  <p>full script:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      let course_inv = [];
    jQuery( document ).ready(function() {
      
      //course field
      let course_field = document.getElementById(&quot;course-field&quot;);
      course_field.placeholder = &quot;LEED v4 Project Management,LEED for Homes Workshop: Part2,...&quot;;
      
      jQuery(&quot;.wpcf7&quot;).wrap('&lt;div id=&quot;form-container&quot;/&gt;');
      
      //add tag container
      jQuery(&quot;.wpcf7&quot;).before('&lt;label class=&quot;tag-label&quot;&gt;Selected Course&lt;span style=&quot;font-size: 18px&quot;&gt;(s)&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;*&lt;/span&gt;&lt;div id=&quot;course-tag-container&quot;/&gt;&lt;/label&gt;');
       
      jQuery(&quot;#form-container&quot;).append('&lt;button id=&quot;fake-submit&quot; type=&quot;button&quot;&gt;Send&lt;/button&gt;');
      
      jQuery(&quot;#fake-submit&quot;).click((event)=&gt;{
        
        jQuery(&quot;#course-field&quot;).val(&quot;&quot;);
        jQuery(&quot;#course-field&quot;).val(course_inv.join(&quot;, &quot;));
        jQuery(&quot;#submit-button&quot;).click();
        
      })
      
  });
    
      jQuery(document).on('ready ajaxComplete', function () {
      
      
      
      
          //add button functionality
      jQuery(&quot;.et_pb_post&quot;).wrap('&lt;div class=&quot;course-wrapper&quot; /&gt;');      
      jQuery(&quot;.et_pb_post&quot;).after('&lt;input type=&quot;image&quot; name=&quot;addButton&quot; src=&quot;http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_add.svg&quot; width=&quot;100px&quot; height=&quot;auto&quot; alt=&quot;add button&quot; class=&quot;add-button&quot;&gt;');  
      jQuery(&quot;.add-button&quot;).wrap('&lt;div/&gt;');
      
      //adding button functionality   
      jQuery(&quot;.add-button&quot;).click((event)=&gt;{    
          let course_name = jQuery(event.target).closest(&quot;.course-wrapper&quot;).find(&quot;.entry-title&quot;).text();
        
        if(course_inv.indexOf(course_name) === -1){
          
          course_inv.push(course_name);
          
          
         jQuery(&quot;#course-tag-container&quot;).append('&lt;div class=&quot;tag&quot;&gt;&lt;div class=&quot;course-wrap&quot;&gt;&lt;p class=&quot;course&quot;&gt;'+course_name+'&lt;/p&gt;&lt;div class=&quot;input-wrapper&quot;&gt;&lt;input type=&quot;image&quot; name=&quot;removeButton&quot;    src=&quot;http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg&quot; alt=&quot;remove button&quot; class=&quot;remove-button&quot;&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
        
        jQuery(&quot;input.remove-button&quot;).click((event)=&gt;{
                  
          console.log(&quot;start------------\n&quot;+&quot;courses:&quot; +course_inv.join(&quot;,&quot;));
          
          //find course text
          console.log( &quot;index: &quot;+course_inv.indexOf(jQuery(event.target).closest(&quot;.tag&quot;).find(&quot;.course&quot;).text()) );
          
              course_inv.splice(
                  course_inv.indexOf(jQuery(event.target).closest(&quot;.tag&quot;).find(&quot;.course&quot;).text()), 1
                             );
          console.log(&quot;courses:&quot; +course_inv.join(&quot;,&quot;)+&quot;\n end----------------&quot;);
              
          
              event.target.closest(&quot;.tag&quot;).remove();
              
          });   
        }else{
          jQuery(&quot;.tag:contains('&quot;+course_name+&quot;')&quot;).addClass('animate')
            jQuery(&quot;.tag:contains('&quot;+course_name+&quot;')&quot;).on(&quot;animationend&quot;, ()=&gt;{
              jQuery(&quot;.tag:contains('&quot;+course_name+&quot;')&quot;).removeClass('animate');
              });
        }
      })
  
      }); 
  &lt;/script&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>input,select{
    border-radius: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 10px !important;
    font-size: 18px !important;
  }
  ul input:nth-of-type(2){
    border:none;
  }
  
  .searchandfilter p
  {
      margin-top: 1em;
      display: block !important;
  }
  .searchandfilter ul
  {
      display: block !important;
  }
  
  .searchandfilter h4
  {
      margin:20px 0;
      font-size:20px !important;
  }
  .widget-area .searchandfilter li, .widget-area .searchandfilter p
  {
      display:block !important;
  }
  
  /*style the wp-pagenavi pagination links*/
  
  .wp-pagenavi a,
  .wp-pagenavi span {
      color: #000000;
      background: #f1f3f5;
      font-size: 1em !important;
      line-height: 1em;
      font-weight: bold !important;
      padding: 0.45em 0.8em !important;
      border-radius: 100px;
      transition: all .5s;
  }
  
  
  /*style the wp-pagenavi current page number*/
  
  .wp-pagenavi span.current {
      color: #ffffff !important;
      background: #0070fc !important;
    font-size: 17px !important;
      border-radius: 100px;
  }
  
  
  /*style the wp-pagenavi pagination links on hover*/
  
  .wp-pagenavi a:hover {
      color: #ffffff!important;
      background: #0070fc!important;
  }
  
  
  /*style the wp-pagenavi pages text*/
  
  .wp-pagenavi .pages {
      background: none;
  }
  
  
  /*remove border and center the wp-pagenavi links*/
  
  .wp-pagenavi {
      border-top: none;
      text-align: center;
  }
  /*contact form css*/
  .wpcf7 {
    background-color: #DBDBDB;
      border-radius: 5px;
  }
  
  .wpcf7-form{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 15px;
    margin-bottom: 5px;
    
    padding: 0px;
    
  }
  
  #course-field{
    background-color: #deddbd;
    
  }
  
  .wpcf7-textarea {
    width: 100% !important;
    
  }
  
  .wpcf7 input {
    margin-top: 5px;
    width: 100%;
    height: 43px;
    font-size: 17px !important;
    padding-left: 10px;
    border-radius: 1px !important;
    margin-bottom: 5px !important;
    
  }
  
  .wpcf7 label{
    color: black !important;
    font-size: 19px;
  }
  
  .textarea{
    height: 150px !important;
    margin-bottom: -10px;
    font-family: verdana !important;
    
  }
  
  #submit-button{
    background: #0078d3;
    border: 0px solid !important;
    border-radius: 5px !important;
    font-size: 18px;
    color: white;
    transition: background-color 250ms;
    cursor: pointer;
    margin-bottom: -10px !important;
  }
  
  #submit-button:hover {
    
    background-color: #3382BE;
  }
  
  .title{
    display: inline-block;
  }
  
  .color{
    background-color: #ededed !important;
  }
  
  .course-wrapper{
    display: flex;
  }
  
  .add-button{
    transition: transform 250ms;
      margin-top: 50%;
  }
  .add-button:hover{
    transform: rotate(-90deg);
    background: url(black.png);
    filter: invert(15%) sepia(100%) saturate(7499%) hue-rotate(196deg) brightness(94%) contrast(102%);
  }
  
  #blog-container{
    left: 10px;
  }
  
  #fake-submit{
      width: 100%;
      border: none;
      height: 44px;
      border-radius: 5px;
      background-color: #005DA4;
      color: white;
      font-size: 15px;
      margin-top: 36px;
      transition: background-color 250ms;
      cursor: pointer;
      margin-top: -14px;
  }
  
  #fake-submit:hover{
    background-color: #3382BE;
  }
  
  /*css for the tags*/
  .tag {
    background-color: rgb(220 220 220);
    display: inline-block;
    
      margin-bottom: 5px;
  
    border-radius: 25px;
      
  }
  
  .course{
    border-radius: 15px;
    margin:0px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size:15px;
    margin-left:15px !important;
  }
  
  .input-wrapper{
    margin-left: -10px;
    margin-right: -15px
  }
  
  .remove-button{
    width:60px !important; 
    height:auto;
    margin-top:10% !important; 
    margin-bottom:0px !important;
  }
  
  .course-wrap{
    display:flex;
    align-items: center;
    margin-bottom:-10px;
    margin-top:-10px;
  }
  
  #course-tag-container{
      margin-top: 10px;
      margin-bottom: -10px !important;
      background-color: white;
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 15px;
      border-radius: 1px;
      border: #BBBBBB 1px solid;
      min-height: 43px;
      
  
  }
  
  #form-container{
      background-color: #DBDBDB;
      padding: 10px;
      padding-top: 12px;
      border-radius: 5px;
  
  }
  
  #course-field, #submit-button{
    display: none;
  }
  
  .tag-label {
      color: black;
      font-size: 19px;
  }
  
  @keyframes highlight-tag {
    50%{
      background-color: #75ACD8;
    }
    100%{
      background-color: #DBDBDB;
    }
  }
  .animate{
    animation: highlight-tag 1s ease-in-out;
  }
  </code></pre>