为什么onclick javascript删除不工作?

Question

我的代码:

<script>
$(document).ready(function(){
addColor = function(){
let html = '<div class="row no-gutters">n'+
'<div class="col-md-3">n'+
'<label for="color_name" class="ml-1">Color name:</label>n'+
'<input type="text" id="color_name" name="color_name[]" class="form-control w-auto d-inline">n'+
'</div>n'+
'<div class="col-md-3">n'+
'<label for="color_code" class="ml-1">Color code:</label>n'+
'<input type="text" id="color_code" name="color_code[]" class="form-control w-75 d-inline jscolor">n'+
'</div>n'+
'<div class="col-md-1">n'+
'<a onclick="addColor()" class="btn btn-info"><i class="fas fa-plus"></i></a>n'+
'<a onclick="deleteColor()" class="btn btn-danger"><i class="fas fa-times"></i></a>n'+
'</div>n'+
'</div>';
$('#box').append(html)
};
deleteColor = function () {
$(this).parent().remove();
};
});
</script>

我想删除onclick=deleteColor()，所以链接不能被点击或check()不会被触发。我如何用JQuery做到这一点?

Answer 1

问题是在你的deleteColor内部，它不知道this指的是什么，所以这样做:

deleteColor = function(obj) {
$(obj).parent().remove();
};

和

onclick="deleteColor(this)"

$(document).ready(function() {
addColor = function() {
let html = '<div class="row no-gutters">n' +
'<div class="col-md-3">n' +
'<label for="color_name" class="ml-1">Color name:</label>n' +
'<input type="text" id="color_name" name="color_name[]" class="form-control w-auto d-inline">n' +
'</div>n' +
'<div class="col-md-3">n' +
'<label for="color_code" class="ml-1">Color code:</label>n' +
'<input type="text" id="color_code" name="color_code[]" class="form-control w-75 d-inline jscolor">n' +
'</div>n' +
'<div class="col-md-1">n' +
'<a onclick="addColor()" class="btn btn-info"><i class="fas fa-plus">+</i></a>n' +
'<a onclick="deleteColor(this)" class="btn btn-danger"><i class="fas fa-times">-</i></a>n' +
'</div>n' +
'</div>';
$('#box').append(html)
};
deleteColor = function(obj) {
$(obj).parent().remove();
};

addColor();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>