Question

So.. This one should be simple. I have an anchor element. When it is clicked, I want to call a function that will delete it’s parent element. Essentially, it is a link to remove the parent.

How would I accomplish this? I have tried using the following, which is not working:

<div>
     <a href='javascript:removeParent()'>Remove</a>
</div>
<script>
function removeParent() {
     $( this ).parent().remove()
}
</script>

Can anyone help me out?

I’m trying to accomplish this because it is a form that can have multiple attributes… So you can add more attributes and thus need a way to remove them.

Cheers!

Answer 1

$(this) isn’t the element the way you’re doing it.

Ideally, this:

<a href='#' class='remove'>Remove</a>

$('.remove').on('click', function(e){
    e.preventDefault();
    $(this).parent().remove();
});

However this part of your question “So you can add more attributes and thus need a way to remove them.” means you need to apply this to future elements

$(document).on('click', '.remove', function(e){
    e.preventDefault();
    $(this).parent().remove();
});

Though in an ideal situation you’d give jQuery less to search, so give your list wrapper an ID and use that to identify the removable elements.

$('#attributelist').on('click', '.remove', function(e){
    e.preventDefault();
    $(this).parent().remove();
});