Question

Here是我的问题的示例，下面是相同的代码的 HTML

<button id='preview_btn'>Add</button>

<table id="point_tbl">

</table>

的JavaScript

var pointList = [];

function deletePoint(id) {
  console.log(id);     // should be string but turns out to be the tr element
    for (var i = 0; i < pointList.length; i++) {
        if (pointList[i].id == id) {
            pointList.splice(i, 1);
            document.getElementById(id).remove();
            document.getElementById(id + "item").remove();
        }
    }
}

function getTemplate(obj) {
    var id = obj.id + "item";
    var aa = obj.id;
    var row = "<tr id = '" + id + "'><td>" + obj.sn + "</td><td>" + obj.x + "</td><td>" + obj.y + "</td><td>" + obj.tx + "</td><td>" + obj.ty + "</td><td>" + obj.lbl + "</td><td><button  class='del_point' onclick = 'deletePoint("+id+");'>Delete</button></td></tr>";
    return row;
}

document.getElementById("preview_btn").onclick = function(event) {
var id =  getUniqueId();
    var obj = {sn: pointList.length, x: 10, y: 10, tx: "0.5", ty: "0.5", lbl: "", id: id};
    $('#point_tbl').append(getTemplate(obj));
    pointList.push(obj);
}

function getUniqueId() {
    if (!getUniqueId.idList) {
        getUniqueId.idList = [];
    }
    var id = "uniqueID" + Math.round(Math.random() * 1000 + 1);
    if (getUniqueId.idList.indexOf(id) != -1) {
        return getUniqueId();
    } else {
        getUniqueId.idList.push(id);
    }
    return id;
}

单击Add按钮时，会添加一个带有按钮的新行。在这个新添加的按钮上，deletePoint函数使用getTemplate函数进行绑定。 deletePoint函数接受由getTemplate函数创建的行（tr）的id。

我正在deletePoint函数中记录传递的参数。我期待这是行的id（基本上是一个字符串），但事实证明它是整个tr元素。

无法解决问题，请帮助。

Answer 1

事件处理程序中生成的代码是

deletePoint(someId)

而不是

deletePoint("someId")

由于大多数浏览器在全局范围内为具有id的所有元素（变量名称为id）创建变量，因此传递元素而不是字符串（在某些浏览器中，您将传递undefined）

立即修复：更改

onclick = 'deletePoint("+id+");'

到

onclick = 'deletePoint(\""+id+"\");'

更好：不要在HTML中内联JS代码以避免这些问题。例如，为您的单元格提供id和data-attribute，然后像对待其他元素一样进行绑定。

Answer 2

您可以更改删除功能以解决问题

function deletePoint(id) {
  id.remove();
}

传递元素的id但是获取元素本身

2 个答案: