[zauii]

Hi i've a slight minor issue when attempting to remove a parent element from an A button.

The html structure is as follows:
The P,A tag is generated by js into the dom on demand so it is not there initially.
Essentially it is a link/button that should remove itself and the parent box/element (p-tag).

<td>
  <p>
<a href='javascript:remove()'>X</a><br/>test
 </p>
</td>

The remove function looks like this

function remove()
{
	$(this).parent().remove();
}

Doesn't seem to work but i'm not sure whats wrong?
Any help is appreciated.

[BetaWar]

From what I have found, in Javascript when you call a function through the href attribute it doesn't send the caller information (invoke the function as part of the caller) so you can't use the this keyword to get the correct element (it tends to send window instead).

So, try changing:

<td>
  <p>
<a href='javascript:remove()'>X</a><br/>test
 </p>
</td>

to this:

<td>
  <p>
<a href='javascript:void;' onclick='remove(this)'>X</a><br/>test
 </p>
</td>

And your javascript to this:

function remove(obj)
{
	$(obj).parent().remove();
}

Or, you could do something like this:

<td>
  <p>
<a href="javascript:void" class="close_btn">X</a><br/>test
  </p>
</td>

And use this javascript:

$(document).ready(function(e){
  $(".close_btn").click(function(e){
    $(this).parent().remove();
  });
});

NOTE - Untested code.

Hope that helps.

[zauii]

BetaWar, on 03 October 2011 - 09:54 AM, said:

From what I have found, in Javascript when you call a function through the href attribute it doesn't send the caller information (invoke the function as part of the caller) so you can't use the this keyword to get the correct element (it tends to send window instead).

So, try changing:

<td>
  <p>
<a href='javascript:remove()'>X</a><br/>test
 </p>
</td>

to this:

<td>
  <p>
<a href='javascript:void;' onclick='remove(this)'>X</a><br/>test
 </p>
</td>

And your javascript to this:

function remove(obj)
{
	$(obj).parent().remove();
}

Or, you could do something like this:

<td>
  <p>
<a href="javascript:void" class="close_btn">X</a><br/>test
  </p>
</td>

And use this javascript:

$(document).ready(function(e){
  $(".close_btn").click(function(e){
    $(this).parent().remove();
  });
});

NOTE - Untested code.

Hope that helps.

Thanks that solved it, however i couldn't put 'javascript:void;' in the href without getting an error.
I did put a simple #(hash) there instead however, is there a way to not have the hash displaying in the url? (It looks a bit cheap to always have a hash in the url everytime the link is pressed)

This post has been edited by zauii: 03 October 2011 - 10:34 AM

[BetaWar]

Ah, sorry. Had a slight syntax error. It should be:

<a href="javascript:void(0);">Test</a>

(Just look at the href part, I didn't worry about the rest of the example).

Hope that helps.