JavaScript 重置 PHP/AJAX 中的填充字段

Question

我有一些 jQuery，它使用 AJAX 和 JSON 用数据填充 UL 标签。

这是 jQuery 代码：

 $('#pSearch').on('click', function()
 {
   var partnername = $('#pNameSearch').val();
   if($.trim(partnername) != '')
   {
     $.post('api/pNameSearch.php', {partnername: partnername}, function(data)
     {
       var obj = JSON.parse(data);
       $('#pName').empty();
       var htmlToInsert = obj.map(function (item)
       {
         return '<li>' + item.datestamp + ' - ' + item.comment + ' - ' + item.username + '</li>';
       }).join('');
       $('#pNames').html(htmlToInsert);
     });
   };
 });

上面的代码填充了一个名为 pNames 的 UL 字段。它使用从 PHP 脚本检索的已解析 JSON 数据填充 LI 标签。

我现在需要做的是清除 pNames 字段。

在打印数据的搜索窗口中，我有一个 HTML RESET 按钮。

 <input type="reset" class="btn btn-sm btn-default" id="pReset" name="pReset" value="reset" />

请注意输入字段中的类型（我已将其设置为“重置”）将清除 FORM 字段，但不会清除填充数据的 UL 字段。

这是我尝试用来清除该字段的 JavaScript：

 $('#pReset').on('click', function () 
 {
   document.getElementById('#pName').val("");
 });

接下来我可以尝试什么？

Answer 1

更新

由于您没有发布代码，所以让我们使用这个简化的示例：

HTML：

<h3><code>pNames</code></h3>
<ul id="pNames">
</ul>
<div>
    <button id="get-pnames">Get pNames</button>
    <input type="reset" id="pReset" value="Reset pNames" />
    <input type="reset" id="pClear" value="Clear pNames" />
</div>

JS

var yourOriginalAjaxCallbackLogic = function (obj) {
    var htmlToInsert = obj.map(function (item) {
        //console.log(
         return '<li>' + item.datestamp + ' - ' + item.comment + ' - ' + item.username + '</li>';
       }).join('');
       $('#pNames').html(htmlToInsert);
};

$('#get-pnames').on('click', function (e) {
    e.preventDefault();
    // your additional logic for grabbing 
    // the pName and what not would go here

    // note the last argument to $.post - this allows us to let jQuery
    // take care of converting the json response
    $.post('api/pNameSearch.php', {partnername: partnername}, function (data) {
        yourOriginalAjaxCallbackLogic(data);
    }, 'json');
});

// This version just removes the content of the LI items.
$('#pReset').on('click', function (e) {
    e.preventDefault();
    $('#pNames li').html('');
});

// This version removes all the LI items
$('#pClear').on('click', function (e) {
    e.preventDefault();
    $('#pNames').empty();
});

您可以在这里看到一个工作小提琴：http://jsfiddle.net/qhrmh3o1/1/

---

.val

仅适用于表单输入。这些是

li

元素，因此您可以使用

$('li').html('');

$('#pReset').on('click', function () {
   $('#pName li').html('');
});

您可能需要修改该选择器，因为对于您想要清除的

li

项目（或者如果您确实想从 DOM 中删除它们或它们的

ul

），我不能 100% 确定该选择器应该是什么。

Answer 2

因此，我将 UL 标签放置在 DIV 中，称为 masterdiv。

我更新了我的 JavaScript，如下所示：

$('#pReset').on('click', function () 
{
  $('#masterdiv ul').text("");
});

这有助于清除名为 pNames 的 UL 字段。