如何获取p标记内的动态id或输入类型的动态值

Question

我通过在下面的div live下添加带有动态id的p标签添加了内容：

$("#show_comments").append('<p id="'+ id +'">' + msg + '<input type="hidden" id="delcomment" value="'+id +'"> <input type="button" id="del_status" value="Delete">' + '</p><br/>'); id++;

在HTML格式中，它将是

<p id="1">
test A
<input type="hidden" id="delcomment" value="1">
<input type="button" id="del_status" value="Delete">
</p>

<p id="2">
test B
<input type="hidden" id="delcomment" value="2">
<input type="button" id="del_status" value="Delete">
</p>

我试着通过按下Delete按钮来获取p标记的id值（即1或2或等）或输入类型hidden delcomment的值（即1或2或等）。

 $("#show_comments").on('click', '#del_status', function () { console.log($("#delcomment").val());

但每次当我点击“测试C”删除时，它都会给出div下delcomment的第一个值。即1（测试A值），而不是“测试C”的3。

在此输入图像说明

请问如何通过按下删除按钮来获得p标记的id值（即1或2或等）或输入类型隐藏的delcomment值（即1或2或等）。

Answer 1

首先，您不能在ids中重复，因此将inputs的ids更改为类，如下所示：

null

$("#show_comments").on('click', '.del_status', function () { console.log($(this).closest('p').find('.delcomment').val())});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_comments">
  <p id="1">
    test A
    <input type="hidden" class="delcomment" value="1">
    <input type="button" class="del_status" value="Delete">
    </p>
    <p id="2">
    test B
    <input type="hidden" class="delcomment" value="2">
    <input type="button" class="del_status" value="Delete">
    </p>
    
</div>