时间戳

首页 > 解决方案 > 为什么onclick javascript删除不起作用？

jquery - 为什么onclick javascript删除不起作用？

问题描述

这是我的代码：

<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 做到这一点？

标签： jqueryajax

解决方案

问题是在你的内部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>

推荐阅读