使用ajax调用清空div答案

【问题标题】：using ajax call to empty the div使用ajax调用清空div
【发布时间】：2017-05-21 13:52:30
【问题描述】：

制作一个ajax，所以当我点击这个Link1按钮时，我需要清空products_list div中的内容

<button type="w3-button">Link1</button>

请帮助我了解如何在单击link1 按钮时进行 ajax 调用，它会清空product_list 中的产品

以下代码包含一个用于清除 products_list 内容的 javascript，但它不起作用

PHP 文件

 <?php
session_start(); //start session
include("config.inc.php"); //include config file
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stores</title>
<link href="style/style1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div align="center">
<h3>Products</h3>
</div>

<script>
$(document).on("click", ".w3-button", function() {
  $('.products-wrp').html('')
 // $("#products_list").html();
});</script>
<?php
//List products from database
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code, product_image, product_price FROM products_list");
//Display fetched records as you please

$products_list =  '<ul id ="products_list" class="products-wrp">';

while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;

}
$products_list .= '</ul></div>';
echo $products_list;
?>
</body>
</html>

【问题讨论】：

试试 $('.products-wrp').empty()

标签： javascript php jquery html ajax

【解决方案1】：

检查下面的代码将在 Ajax 请求失败时清空 div -

function getFailOutput() {
    $.ajax({
        url:'myAjax.php',
        success: function (response) {
            console.log(data, response);
            $('#output').html(response);
        },
        error: function () {
            //Empty Output  Div ON Error Returned From Ajax Request
            $('#output').html('');
        },
    });
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> | <a href="#" onclick="return getFailOutput(); return false;"> test failure</a>
<div id="output">waiting for action</div>

【讨论】：

@prog 是的，当然。您也可以成功使用同一行代码。你可以在它的 jquery 函数的任何地方使用它。