我在 Laravel 视图页面中有以下代码。单击删除按钮不起作用。意味着，它没有删除 div 并且浏览器控制台中没有错误。单击删除按钮似乎没有发生任何操作。我该如何修复？我尝试了下面提到的脚本的所有 3 种方法。我觉得无论在哪里提到
#newInput <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form>
<h3>Add Next Education</h3><div class="row"><div class="col-lg-6 col-md-6 col-sm-12 col-12"><div class="form-group "><strong>Course / Program</strong><input type="text" name="course[]" class="form-control" ></div></div></div>
<a class="btn btn-info addRow"><i class="fa fa-plus" title="Add Another Education"></i></a>
<div id="dynamic_div"></div>
<div class="card-footer row justify-content-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
方法一：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click', '.addRow', function() {
var addRow = '<div id="newInput"><h3>Add Next Education</h3><div class="row"><div class="col-lg-6 col-md-6 col-sm-12 col-12"><div class="form-group "><strong>Course / Program</strong><input type="text" name="course[]" class="form-control" ></div></div></div><a class="btn btn-info addRow"><i class="fa fa-plus" title="Add Another Education"></i></a><a class="btn btn-danger remove"> <i class="fa fa-times" title="Remove Education"></i></a></div>';
$('#dynamic_div').append(addRow);
});
$(document).on('click', '.remove', function() {
$(this).parent('#newInput').remove();
});
</script>
</body>
</html>
方法二：
$(document).on('click', '.remove', function() {
$(this).closest('#newInput').remove();
});
这也不会删除任何 div。与第一种方法的结果相同。
方法三：
$(document).on('click', '.remove', function() {
$('#dynamic_div').last().children().remove();
});
这会删除所有附加的 div，而不仅仅是最后一个 div。我只想删除单击删除按钮的单个 div。
closest()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form>
<h3>Add Next Education</h3>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="form-group"><strong>Course / Program</strong><input type="text" name="course[]" class="form-control"></div>
</div>
</div>
<a class="btn btn-info addRow"><i class="fa fa-plus" title="Add Another Education"></i></a>
<div id="dynamic_div"></div>
<div class="card-footer row justify-content-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click', '.addRow', function() {
var addRow = '<div id="newInput"><h3>Add Next Education</h3><div class="row"><div class="col-lg-6 col-md-6 col-sm-12 col-12"><div class="form-group "><strong>Course / Program</strong><input type="text" name="course[]" class="form-control" ></div></div></div><a class="btn btn-info addRow"><i class="fa fa-plus" title="Add Another Education"></i></a><a class="btn btn-danger remove"> <i class="fa fa-times" title="Remove Education"></i></a></div>';
$('#dynamic_div').append(addRow);
});
$(document).on('click', '.remove', function() {
$(this).closest('div#newInput').remove();
});
</script>
</body>
</html>