Question

我在create function中创建了文本字段行。我在create（）函数中添加了delete按钮，当单击按钮时调用delete。有什么帮助吗？

<body>
    <input type="button" value="createDiv" onclick="create()"/>
</body>  

<script type="text/javascript" defer="defer">

function create()
{
    var newDiv = document.createElement('div');
    newDiv.innerHTML = "<table id='e' border><tr><td><input type='text'><button onclick=del(this.value)</button></td></tr></table>";
    //      newDiv.className = 'newClass';
    document.body.appendChild(newDiv);

}

function del (e) {
    if ('function' === typeof e.remove) {
        return e.remove();
    }
    return e.parentNode.removeChild(e);
}

Answer 1

变化：

<button onclick=del(this.value)

为：

<button onclick='del(this)'>

DEMO

两个问题：

您错过了结束>。
del函数希望接收要删除的元素。元素的值不合适，特别是因为按钮没有值。

我不确定这会做你真正想要的。这将只删除按钮，它不会删除表行。如果您要删除整个表格，则需要上升几个等级parentNode，直至到达<table>元素。

此外，您应始终将属性值括在引号中。在这种情况下，它没有它们，因为值中没有空格，但你应该养成习惯。

Answer 2

我猜你错过了引号和Button Tag Close标签'＆gt;'

<button onclick='del(this.value)'></button>

Answer 3

您的按钮的HTML代码不正确。您没有标记的结束括号，并且由于onclick属性值周围没有分隔符，结束标记将成为值的一部分，从而导致脚本中出现语法错误。

试试这样：

newDiv.innerHTML = '<table id="e" border><tr><td><input type="text"><button onclick="del(this.value)"></button></td></tr></table>';

Answer 4

如果你想删除该行，那么代码应该是这样的......

<script type="text/javascript" defer="defer">
    function create()
    {
        var newDiv = document.createElement('div');
        var rowId = "someId";
        var output = "<table id='e' border><tr id='"+rowId+"'><td ><input type='text'><button onclick=del('"+ rowId +"')>delete</button></td></tr></table>";
        newDiv.innerHTML = output;
        newDiv.className = 'newClass';
        document.body.appendChild(newDiv);                          
    }


    function del (id) {
        var div = document.getElementById(id);
        div.parentNode.removeChild(div);
    }

</script>

如果是这样，你就像Barmar Said那样犯了很多错误。

删除功能无法删除div

4 个答案: