How to pass `this` as an argument in javascript function?

Question

I am using javascript in my project.

I have on HTML table <table id='idDocList'> and I am doing append some html on this table as below code. But I want to hide respective <tr> when user click on Delete anchor tag.

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a onclick=deleteDocument(this,'" + file.name + "')> Delete</a></td></tr>");

How can i do this using Jquery?

The following example does not work

function deleteDocument(CurAnchorTag, fileName) {
    $(CurAnchorTag).closest('tr').hide();
}

I don't want to use ID for <a> tag as I have many Documents.

Possible duplicate of stackoverflow.com/questions/203198/… — Arun P Johny
– Arun P Johny, Commented Oct 15, 2014 at 12:35
You can pass event as a parameter instead of this. Then use event.target in your click handler function. — user1741851
– user1741851, Commented Oct 15, 2014 at 12:41
Also, onclick='deleteDocument(this,\'" + file.name + "\')'. Well, some people say I have OCD. — user1741851
– user1741851, Commented Oct 15, 2014 at 12:53

Anoop Joshi P · Accepted Answer · 2014-10-15 12:33:15Z

1

As a quick fix, you can use like this,

$(CurAnchorTag).closest('tr').hide();

Replaced <tr> with tr

You can remove the inline function call with jquery like this way,

$("#idDocList").on("click", "td a", function() {
    $(this).closest("tr").hide();
    var filename = $(this).closest("td").prev().text();
});

answered Oct 15, 2014 at 12:33

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

antyrat · Accepted Answer · 2014-10-15 12:34:48Z

0

I would suggest you to change your code to:

var newRow = $("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a href='#'> Delete</a></td></tr>").appendTo("#idDocList");
newRow.find( 'a' ).click( function( e ) {
    e.preventDefault();
    $( this ).closest('<tr>').hide();
});

answered Oct 15, 2014 at 12:34

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Comments

dfsq · Accepted Answer · 2014-10-15 12:36:17Z

0

You would better use event delegation and get rid of inline onclick handlers all together:

$('#idDocList').on('click', '.btn-delete', function() {
    $(this).closest('tr').hide();
    // read filename: $(this).data('filename')
});

And use it with HTML (the sting you append):

"<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class="btn-delete" data-filename='" + file.name + "'>Delete</a></td></tr>"

Note the part:

<a class="btn-delete" data-filename="filename">Delete</a>

answered Oct 15, 2014 at 12:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Shems Eddine · Accepted Answer · 2014-10-15 12:57:35Z

0

you can just use

$(".delete_link").click(function(){$(this).closest('tr').hide();}

Jquery will use the this of which ever element called it. There will be no need for the onclick on the html file.

edited Oct 15, 2014 at 12:57

answered Oct 15, 2014 at 12:35

Shems Eddine

14111 bronze badges

1 Comment

user1741851 Over a year ago

Will not work if the function is called from onclick attribute

rneves · Accepted Answer · 2014-10-15 13:01:20Z

0

You recommend you to use event for a class using the jquery

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class='delete_link'> Delete</a></td></tr>");

The code below will add the event and need to execute always after add a "tr", unless you use a delegate to this

$(".delete_link").click(function(){ $(this).closest("tr").hide() });

If you don't want to use a class you can use this

$("#idDocList td > a").click(function(){ $(this).closest("tr").hide() });

edited Oct 15, 2014 at 13:01

answered Oct 15, 2014 at 12:45

rneves

2,09326 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to pass `this` as an argument in javascript function?

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related