title: how to remove element by click using jquery
body: <p>I want to remove or add <code>&lt;p&gt;</code> tags after, or before, <code>&lt;hr&gt;</code>; but when I click onto the <code>&lt;hr&gt;</code> and want to delete just one <code>&lt;hr&gt;</code> jQuery deletes two.</p>
  <p>Also, when I click on the add button, I want to just add one <code>&lt;p&gt;</code> tag, but jQuery added two.</p>
  <p>How can I fix this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("hr").each(function () 
  {
      var seatID = $(this);
  
      $(document).on('click', "hr", function()
      {
          const delete2 = document.querySelector('.del_i');
          const after = document.querySelector('.add_b');
          const before = document.querySelector('.add_u');
          var selector = $(this);
          $(".tools_editor").show();
          var offset = $(this).offset();
          $('.tools_editor').css(
              {position: 'absolute', 
               top: (offset.top + 60)+'px', 
               left: $( window ).width() / 2 + 'px'
              });
              
          delete2.addEventListener('click', () =&gt; {
              selector.remove();
              $(".tools_editor").hide();
          })
          after.addEventListener('click', () =&gt; {
              selector.after("&lt;p&gt;add bottom p&lt;/p&gt;");
              $(".tools_editor").hide();
               
          })
          before.addEventListener('click', () =&gt; 
          {
              selector.before("&lt;p&gt;add top p&lt;/p&gt;");
              $(".tools_editor").hide();
          })
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>hr:before {
      font-size: 18px;
      font-family: tahoma;
      letter-spacing: .7rem;
      content: "......";
      display: block;
      margin: 0 auto;
      color: #858585;
      padding: 15px 0;
  }
  hr::after {
      position: absolute;
      content: '';
      z-index: 2;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
      display: block;
      background: rgba(0,0,0,0);
  }
  hr {
      position: relative;
  }
  .tools_editor {
      box-shadow: -2px 1px 3px 0 rgba(50, 50, 50, 0.5);
      padding: 10px;
      background: #fff;
      z-index: 1;
      border-radius: 6px;
  }
  
  .tools_editor:before,
  .tools_editor:after {
      position:absolute;
      content:"";
  }
  .tools_editor:after {
      border:12px solid transparent;
  }
  .tools_editor:before {
      border:10px solid transparent;
  }
  
  .tools_editor:after {
      left:50%;
      margin-left:-6px;
      top:-24px;
      border-bottom-color:rgba(50, 50, 50, 0.1)
  }
  .tools_editor:before {
      left:50%;
      margin-left:-4px;
      top:-20px;
      border-bottom-color:#fff;
      z-index:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;hr&gt;
  &lt;p&gt;test 1&lt;/p&gt;
  &lt;p&gt;test 2&lt;/p&gt;
  &lt;hr&gt;
  
  
  &lt;div style="display:none;" class="tools_editor dis_n"&gt;
  &lt;i class="del_i" style="cosur:pointer:padding:5px;"&gt;delete&lt;/i&gt; | &lt;i class="add_b" style="cosur:pointer:padding:5px;"&gt;add bottom&lt;/i&gt; | &lt;i class="add_u"&gt;add top&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>