JavaScript删除div（removeChild）

Question

首先，我要在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。

它对我不起作用。 会在这里对大家有所帮助。

谢谢

Answer 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;移为return false; 到活动结束

Answer 2

return结束了javascript的执行。 return语句之后什么也不会执行。

Answer 3

默认情况下，表单中的按钮的类型为Submit。 要停止提交表单，请type="button" 。 然后，您不需要return false ，如果需要，该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>';

Answer 4

除了错误的语句顺序外， 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);

Answer 5

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