使用 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() 方法中。