Question

我正在使用Liferay portlet。我弹出一个，点击portlet中的一个链接就可以调用它。我需要根据用户想要添加的内容，使用Javascript动态创建元素。我创建了ul一次。每隔一次，li需要添加到同一ul。因此，我使用document.getElementId()检索ul（如果已创建）并向其添加项目。

问题：问题是当我提交表单或关闭弹出窗口并再次打开它时，先前创建的相同元素仍然存在但是被隐藏。因此，当我按ID获取元素时，我可以使用旧值来检索旧ul。我需要在提交或关闭弹出窗口时将其删除。或者更好的是，每次加载页面弹出时。我使用哪个全局事件处理程序来删除此ul元素？我试过了window.onload。不起作用！

Answer 1

每次需要新表格时，您都应该重新创建表单。

另外，不要通过ID获取Elements。这是一个缓慢的DOM操作，可能会失败。建议对静态HTML使用ID，因此可以指向CSS和Javascript。

如果你需要它，只需在你的Javascript代码中保留对它的引用，而不是getElementsByID。（我假设您需要它来提交提交时的表单数据。）

一个简单的例子（我很抱歉在这里使用jquery，但无论如何它都是通用语言）：

var inputs = { givenname: $('<input type="text">')
             , surname: $('<input type="text">')
             , age: $('<input type="select">')
             , gender: $('<select>')
                 .append($('<option>').text('Female').val(0))
                 .append($('<option>').text('Male').val(1))
                 .append($('<option>').text('Other').val(2))
             }

var form = $('<div class="myform">');
Object.keys(inputs).forEach(function(k) {
    form.append(inputs[k]);
});

function getdata() {
    var o = {}
    Object.keys(inputs).forEach(function(k) {
        o.k = inputs[k].val();
    });
    return o;
}

popupFunction(form, getdata);

然后，（要创建）函数popupFunction可以将表单移动到某处（mycontainer.append(form)），并且在提交数据时，使用getdata函数提取数据。

请注意我所说的引用都保存在inputs对象中。它们不是直接的DOM节点引用，而是对jquery对象的引用，而jquery对象又保存DOM节点，其值可以使用jquery val()函数提取。

再次显示页面时删除以前创建的HTML元素

1 个答案: