Remove the button from the second div, which will be the same id (class) button in the first html, jquery div

Question

I want to delete <button>.

for example remove the second tag <div> <button>when I need to click the second tag <div> <button>as<div class="demo2">

 <div class="demo1">
  <button id="btn1" class="btn1">Add1</button>
 </div>
 <div class="demo2">
   <button id="btn1" class="btn1">Add1</button>
 </div>
 <script src="jquery-3.1.1.min.js"></script><script>
      $(document).ready(function()
     {
        alert("aaa");
        $("#demo2 .btn1").remove();
     });
 </script>

I am trying this code:

 <script>
      $(document).ready(function()       
      {
           $("#btn1").remove(); 
       });
</script>

he will delete the first <button>, but I want to remove the second <div>  and<button>

Answer 1

You need .demo2, not #demo2, because demo2- classand thisnot an id

     
     $(document).ready(function()
     {
        alert("aaa");
        $(".demo2 .btn1").remove();
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
        <button id="btn1" class="btn1">Add1</button>
     </div>
     <div class="demo2">
        <button id="btn1" class="btn1">Add2</button>
     </div>

Run codeHide result

It can also be a little more complicated, since you don’t know which identifier is being repeated, in this case you can use a loop as shown below

$(document).ready(function()
     {
        $('.demo1 button').each(function(){
          var id = $(this).attr('id');
          $('.demo2 button').each(function() {
            if($(this).attr('id') === id) {
              $(this).remove();
            }
          })
        })
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
        <button id="btn1" class="btn1">Add1</button>
        <button id="btn2" class="btn1">Add1</button>
     </div>
     <div class="demo2">
        <button id="btn1" class="btn">Add2</button>
         <button id="btn2" class="btn">Add2</button>
        <button id="btn3" class="btn">Add2</button>
     </div>

Run codeHide result

Answer 2

, , , -, CSS- . , .

$(document).ready(function() {
  alert("aaa");
  $("#btn2").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
  <button id="btn1" class="btn1">Add1</button>
</div>
<div class="demo2">
  <button id="btn2" class="btn1">Add1</button>
</div>

Hide result

Answer 3

i- :

getElementAt(selector, i) {
    return $(selector + ":eq(" + i + ")");
}

:

getElementAt("[id=btn1]", 1).remove();

id # , id, , . HTML , , , [id=btn1] #. document.querySelectorAll("[id=btn1]")[i], .