0

所以首先我在javascript函数中动态创建一些div（某个按钮的事件处理程序），我在每个div中添加一个按钮

    newdiv.id = counter;
    newdiv.innerHTML = "Product " + (counter + 1) + " <br><input type='text' name='myInputs[]'><button onclick=\"return false;
    document.getElementById('"+counter+"').parentNode.removeChild('"+counter+"');\">Delete item</button>";

假设单击按钮时删除该 div。

它不适合我。会感谢一些帮助这里的家伙。

谢谢

4

5 回答 5

1

您的 onclick 事件在removeChild()调用之前返回

如果你以更清晰的方式编写它，你会得到：

function () {
  // leave the function
  return false; 
  // never executed, because you called return right before
  document.getElementById(counter).parentNode.removeChild(counter);
}

在你做完你想做的任何事情之后，你必须返回。将 移动return false;到事件的末尾。

于 2013-06-11T23:51:52.090 回答
1

return结束 javascript 的执行。return 语句之后的任何内容都不会执行。

于 2013-06-11T23:52:19.813 回答
1

默认情况下，表单中的按钮类型为提交。要停止它提交表单，请使其type="button". 然后你不需要return false，如果需要，它应该在函数的末尾。

另一种方法是使用输入类型按钮。它看起来就像一个按钮，也不会提交表单。

使用 DOM 方法添加额外的元素和监听器会好得多，但这里有一个更容易阅读的 innerHTML 版本（至少对我来说）：

newdiv.innerHTML = 'Product ' + (counter + 1) + '<br><input type="text" name="myInputs[]">' + 
                   '<button type="button" onclick="var el = document.getElementById(\'' + (counter + 1) + '\');' +
                   'el.parentNode.removeChild(el);">Delete item</button>';
于 2013-06-12T00:01:09.213 回答
1

除了语句的错误顺序之外，removeChild调用也不正确。您必须将 DOM 元素传递给removeChild，而不是 ID。

虽然您可以使用 HTML 字符串生成所有元素，但我发现在处理事件处理程序时直接创建 DOM 元素是一种更简洁的方法：

newdiv.id = counter;
newdiv.innerHTML = "Product " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";

var button = document.createElement('button');
button.type = 'button'; // see RobG's answer
button.innerHTML = 'Delete item';
button.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode);
};

newdiv.appendChild(button);
于 2013-06-12T00:13:03.190 回答
0

看起来您在代码有机会执行之前返回 false（尝试将其放在 document.getElementById 语句链之后）。另外，我不会以加号开头任何 HTML 属性。

于 2013-06-11T23:52:43.580 回答