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 字段。

我可能看错了，如果是这样，请告诉我。

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

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

请注意输入字段中的 TYPE，我已设置为 'reset'，将清除 FORM 字段，但不会清除填充数据的 UL 字段。

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

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

我认为很明显我遗漏了一些东西。

Answer 1

更新

既然你没有post你的代码让我们用这个简化的例子：

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();
});

您可以在此处看到有效的 fiddle：http://jsfiddle.net/qhrmh3o1/1/

.val 仅用于表单输入。这些是 li 个元素，因此您可以使用 $('li').html('');

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

您可能需要修改该选择器，因为我不是 100% 确定选择器应该用于您要清除的 li 项目（或者如果您真的想删除它们或它们的 ul 来自 DOM).

Answer 2

所以，我将 UL 标签放在一个名为 masterdiv 的 DIV 中。

我更新了我的 javascript 如下：

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

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

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

JavaScript reset populated field in PHP/AJAX

javascript

jquery

reset