使用 jQuery 检索子按钮的特定父级答案

【问题标题】：Retrieve a specific parent of child button using jQuery使用 jQuery 检索子按钮的特定父级
【发布时间】：2018-05-01 20:59:33
【问题描述】：

我有这个 html 结构（非常通用），div 的 id 是动态添加的，由一个创建顺序对象的函数以这种方式创建：

 <div id="mydiv1">
     <div> Stuff</div>
     <div>
        <button id="remove"></button>
     </div>
 </div>

“删除”按钮应该删除他所在的 div，所以我必须检索 div 的 id 才能做到这一点。我不知道怎么。如何使用 jQuery 进行制作？谢谢

<form>
   <div id="mydiv1">
     <div> Stuff</div>
     <div>
        <button id="remove"></button>
     </div>
   </div>
   <div id="mydiv2">
     <div> Stuff</div>
     <div>
        <button id="remove"></button>
     </div>
   </div>
</form>

我试过了：

("#remove").click(function(event) {
    var id = event.target.id;
}

但结果是：“remove”而不是“mydiv1”或“mydiv2”

【问题讨论】：

您正在使用 jQuery btw :) 您应该更改“如何使用节点 js 和 javascript？”到“我如何使用 jQuery 来实现这一点？” （node.js 在这种情况下没有意义）。
问题与nodejs无关
你是对的，纠正错误:)

标签： javascript html

【解决方案1】：

您应该使用class 而不是id 作为按钮（id 应该是唯一的）：

$('.remove').click(function() {
  $(this).closest('div[id^="mydiv"]').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <div id="mydiv1">
    <div>Stuff 1</div>
    <div>
      <button class="remove">REMOVE</button>
    </div>
  </div>
  <div id="mydiv2">
    <div>Stuff 2</div>
    <div>
      <button class="remove">REMOVE</button>
    </div>
  </div>
</form>

编辑：更新为 OP 发布的新代码

【讨论】：

很抱歉按钮在另一个 div 中！

【解决方案2】：

对于 mydiv2 的更改按钮如下：

$(".remove").click(function() {
    var id = $(this).data('id');
    $("#mydiv"+id).remove();
}

&lt;button class="remove" data-id="2"&gt;&lt;/button&gt;

【讨论】：

【解决方案3】：

使用$(this).parent('div')获取<div>类型的第一个父节点

$("#remove").click(function(event) {
    var parent = $(this).parent('div');
    parent.remove();
}

编辑

所以给你的 div 添加一个类，比如.divRow

<form>
    <div id="mydiv1" class="divRow">
       <div> Stuff</div>
       <div>
           <button id="remove"></button>
       </div>
    </div>
    <div id="mydiv2" class="divRow">
       <div> Stuff</div>
       <div>
           <button id="remove"></button>
       </div>
    </div>
</form>

在这种情况下，您的 javascript 将是

$("#remove").click(function(event) {
    var parent = $(this).parent('.divRow'),
            id = parent.attr("id");
    alert(id);
    parent.remove();
}

【讨论】：

很抱歉按钮在另一个 div 中！

【解决方案4】：

试试

$('.remove').click(function() {
  var id = $(this).parent().parent().attr('id');
  //This will give you the id
});

对于你问题的下一部分，试试这个：

$(document).on('click','.remove',function() {
  var id = $(this).parent().parent().attr('id');
  //This will give you the id
});

【讨论】：

这项工作谢谢，但我需要在删除之前检索 id。 ://
好的，明白了。最后一个问题：有问题的第二个 div 是第一个的克隆，然后当我对第二个 div 执行相同的操作时，我没有找到任何东西，我该如何修复它？
更新了答案:)