CODEWITHSUNDEEP
javascripthtmldom-events
me_digvijay
me_digvijay

Reputation: 5492

Passing id of element but getting the element itself

Here is a sample of my problem and below is the same code 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;
}

When the Add button is clicked a new row is added with a button. On this newly added button the deletePoint function is bind using the getTemplate function. The deletePoint function accepts the id of the row (tr) created by getTemplate function.

I am logging the the passed parameter in the deletePoint function. I was expecting this to be the id(basically a string) of the row but it turns out to be the whole tr element.

Not able to rectify the problem, please help.

Upvotes: 1

Views: 154

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382194

What happens is that the generated code in the event handler is

deletePoint(someId)

instead of being

deletePoint("someId")

As most browsers create a variable in global scope for all elements having an id (the name of the variable being the id), you pass the element, not the string (in some browsers you would pass undefined).

Immediate fix : Change

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

to

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

Better : don't inline JS code in HTML to avoid those problems. For example give an id and data-attribute to your cell and later bind as you do with other elements.

Upvotes: 1

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3655

You can change your delete function to fix problem

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

Upvotes: 0

Related Questions