使用 onclick 在循环中按 ID 删除元素 - jquery

Question

我从数据库中获取数据（复选框和文本）并将其显示在 html 表单上。 数据通过循环显示。 所以，问题是，我在循环中有删除按钮，当我删除时，它会删除整个数据，而不是删除我想要的数据。

foreach 循环中的所有 HTML

<input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" <?php echo $checked; ?>/>

<input type="text" name="answer[<?php echo $ans->answerid; ?>][answer]"  id="answer" class="" value="<?php echo $ans->answer; ?>">

<a class="md-btn-danger" id="remove" ></a>

查询

$(document).ready(function(){
    $('#remove').click(function(){
        $('#answer').remove();
        $('#remove').remove();
        $('.checkbox').remove();
    });

它应该是删除按钮，只删除复选框和文本 id 选定的一个

Answer 1

我认为您的数据是动态添加的。 然后不要使用 ID，因为 ID 应该是唯一的

您应该在移除锚点上使用类名。 然后使用prev()或next()函数remove元素

 $(document).ready(function(){ $('.remove').click(function(){ $(this).prev().remove(); //Remove input $(this).prev().remove(); // Remove checkbox $(this).remove(); // Remove this }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/> <input type="text" name="answer" id="answer" class="" value="answer"> <a class="md-btn-danger remove" >Remove</a><br> <input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/> <input type="text" name="answer[<?php echo $ans->answerid; ?>][answer]" id="answer" class="" value="<?php echo $ans->answer; ?>"> <a class="md-btn-danger remove" >Remove</a>

或者添加父元素：

 $(document).ready(function(){ $('.remove').on("click",function(){ $(this).parent().remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/> <input type="text" name="answer" id="answer" class="" value="answer"> <a class="md-btn-danger remove" >Remove</a><br> </div> <div> <input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/> <input type="text" name="answer[<?php echo $ans->answerid; ?>][answer]" id="answer" class="" value="<?php echo $ans->answer; ?>"> <a class="md-btn-danger remove" >Remove</a></div>

Answer 2

检查您作为 parentNode 给出的层次结构。 您正在删除包含整个数据的父节点。 所以，正确给出关系。 这可能只是问题所在。 否则没关系。 如果它不起作用，请分享您的包含该部分的代码.....

Answer 3

我的建议是只给 parentNode 一次，而不是在 removeChild() 方法中。