删除按钮从第二个div将相同的id（class）按钮在第一个div html，jquery

Question

我想删除<button>。

例如去除第二<div>标签<button>时，我必须点击第二<div>标签<button>像<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> 

我试试这个代码：

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

它会删除第一<button>但我想删除第二个<div> 和<button>

Answer 1

你需要.demo2以来demo2没有#demo2是class和 not 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>

这也可以是一个更复杂一点COND =倒戈，你不知道哪个ID重复，在这种情况下，你可以使用下面的循环

$(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>

Answer 2

不知道你想要什么做的，但首先你不能使用相同的ID标签的CSS两次。如果只是在警报后删除第二个按钮，那么只需更改ID并删除该单个按钮即可。

$(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>

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]。