요소의 ID를 전달하지만

Question

Here 아래 내 문제의 샘플이며, 요소 자체를 점점 동일한 코드 HTML입니다

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

<table id="point_tbl"> 

</table> 

자바 스크립트

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와 데이터 속성을 셀에 부여한 다음 나중에 다른 요소와 마찬가지로 바인딩합니다.

Answer 2

당신은 문제를

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