刪除第二個div中的按鈕，它將在第一個div html，jquery中使用相同的id（class）按鈕

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 = sider你不知道哪個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] 。