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

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>

Jquery

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

它应该是删除按钮，仅删除通过复选框和文本ID选定的按钮

Answer 1

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

您应该在删除 anchor 上使用类名。然后使用 prev() 或 next() 函数删除元素

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