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

＆＃13;

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

＆＃13;

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

＆＃13;

这也可能有点复杂cond = sider你不知道哪个id正在重复，在这种情况下你可以使用如下的循环

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: