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

Question

I have fetch data (checkbox and text) from database and display it on a html form. The data were displayed by using looping. So, the problem is, I have delete button in the looping and when I delete, it will delete the whole data instead of delete the one I desired.

All HTML in foreach looping

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

Jquery

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

it supposed to be the delete button only delete the selected one by the checkbox and text id

Answer 1

I think your data is dynamically added. Then don't use IDs because IDs should be unique

You should use class names on remove anchors. Then remove elements using prev() or next() function

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

Or add parent element:

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

check the heirarchy you have given as parentNode. You are removing the parent node which holds the whole data. So, give relation correctly. This might only be the problem. Otherwise it alright. If it does not work please share your bit of code containing that part.....

Answer 3

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