Question

我在php循环中有一些按钮，按钮有一个onClick方法。我想删除我选择的按钮。

这是我在按钮上的代码：

while($row = $query->fetch_assoc())
{
   $Var1= $row ['Id'];
   $Description= $row ['Description'];
   $Detail= $row ['Detail'];
                    ?>
   <button class="btn btn-danger btn-block" onClick="Hello('<?php echo $Var1; ?>','Delete')">
      <div class="pull-left first">
         <i class="fa fa-bell" aria-hidden="true"></i> <?php echo ucwords($Description); ?>
      </div>
      <div class="pull-left notification">
         <?php echo ucfirst($Detail); ?> 
      </div>
   </button>
}

这就是我在js上尝试的代码

function Hello(ID,Action){


$.ajax({
    type: 'POST',
    data: {"Action":Action,"ID":ID},
    url: 'Pages/Actions.php',
    success: function(data)
    {

        switch (data) 
        { 
            case '1': 
                    $('#Fail').html('<p class="alert alert-warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Empty Fields</p>');
                    $('#Success').html('');
                break;
            case '2': 
                    $('#Fail').html('<p class="alert alert-danger"><i class="fa fa-bug" aria-hidden="true"></i> Fail</p>');
                    $('#Success').html('');
                break;
            case '3'                                                                  
                    $('#Fail').html('');
                    $('#Success').html(''); 
                    $(this).remove();
                break;      
            default:
            alert(data);
        }
    }
});
return false;
}

我的jQuery非常基本所以，如果你能给我一些推荐会很棒

Answer 1

将您的事件功能与html代码分开。这是一个很好的做法。首先，你的id应该是唯一的，所以为你的按钮创建一个类。

$('.some-class').on('click', function(event) {
  event.preventDefault();
  $(this).remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class = "some-class">Button</button>

您可以尝试使用该代码。它应该工作

Answer 2

ES6之前

当时不允许自杀，只允许父母元素杀死他们的孩子。

this.parentNode.removeChild(this)

ES6及以上

this.remove()

JQuery的

$( selector ).remove()

Answer 3

首先，正如Aibol Orazbekov建议的那样，你应该使用类名来启动特定功能。

我的建议是：

请勿使用onClick参数
您应该使用数据集将变量传递给Javascript的函数
你应该使用HTTP代码来处理错误（并使用jQuery的ajax error()函数来处理它们）
不要将大写用作简单变量名称。仅将其用于常量

要回答您的问题，$(this)不会链接到您的元素。

根据您的代码和使用类名，您可以尝试这样的事情：

HTML / PHP

while($row = $query->fetch_assoc())
{
   $var1= $row ['Id'];
   $description= $row ['Description'];
   $detail= $row ['Detail'];
                    ?>
   <button class="btn btn-danger btn-block btn-action" data-id="<?php echo $var1; ?>" data-action="Delete">
      <div class="pull-left first">
         <i class="fa fa-bell" aria-hidden="true"></i> <?php echo ucwords($description); ?>
      </div>
      <div class="pull-left notification">
         <?php echo ucfirst($detail); ?> 
      </div>
   </button>
}

JS

$('.btn-action').on('click', function(event) {
    event.preventDefault();
    var elt = $(this);  // save button element in a variable

    $.ajax({
        type: 'POST',
        data: {
            Action: elt.data('action'),  // use dataset here ...
            ID: elt.data('id')           // ... and here
        },
        url: 'Pages/Actions.php',
        success: function(data)
        {

            switch (data) 
            { 
                case '1': 
                        $('#Fail').html('<p class="alert alert-warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Empty Fields</p>');
                        $('#Success').html('');
                    break;
                case '2': 
                        $('#Fail').html('<p class="alert alert-danger"><i class="fa fa-bug" aria-hidden="true"></i> Fail</p>');
                        $('#Success').html('');
                    break;
                case '3'                                                                  
                        $('#Fail').html('');
                        $('#Success').html(''); 
                        elt.remove();  // this is your error
                    break;      
                default:
                alert(data);
            }
        }
    });
    return false;
}

我希望这个帮助

如何用jQuery删除元素？

3 个答案: