Question

我有一些使用AJAX和JSON的jQuery用数据填充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" />

请注意输入字段中的TYPE（我已设置为“重置”）将清除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('');
});

你可能需要修改那个选择器，因为我不是100％肯定选择器应该是你要清除的li项目（或者如果你真的想要删除它们或它们的ul DOM）。

Answer 2

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

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

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

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

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

2 个答案: