CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

remove div onclick ( using remove )

Following on from some comments of late, I have took the plunge and started playing with jquery. I really am at very basic level, so be nice. If not please click away from the page and answer someone else, getting sick and tired of being marked down.

Ok I have some search results, that we are echoing the drill down criteria in a sdebar, so that user can amend their search. So would like to add the ability for user to click an icon ( set as button ) I have it all working, but, dont know how to set it up so that each of the elements is removeable, without generating tons of code (jquery ids etc etc )

Fiddle: http://jsfiddle.net/ozzy/sKeW5/

js:

$("input").click(function () {
  $("div").remove('.dave');
});

css:

input[type=button]{background: url('dx.png');outline:none;border:none;background-repeat:no-repeat;cursor:pointer;width:11px;height:11px;}

html:

<div class="s_total clearfix dave"><strong class="cart_module_search left">State:</strong><span class="cart_module_search">Queensland&nbsp;</span><input type="button"/></div>
<div class="s_total clearfix"><strong class="cart_module_search left">Region:</strong><span class="cart_module_search">Brisbane&nbsp;</span><input type="button"/></div>
<div class="s_total clearfix"><strong class="cart_module_search left">Category:</strong><span class="cart_module_search">Home and Garden&nbsp;</span><input type="button"/></div>
<div class="s_total clearfix"><strong class="cart_module_search left">Search Term:</strong><span class="cart_module_search">Weber BBQ&nbsp;</span><input type="button"/></div>

As you can see the first div I have appended dave to the class, but wondered what a cleaner way would be whilst still retaining control over each div element. I can give each of the divs a id, but again didnt want to generate tons of js code.

Upvotes: 2

Views: 12774

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50798

Please see TBohnen.jnr's post for the most conclusive answer.

Upvotes: 1

TBohnen.jnr
TBohnen.jnr

Reputation: 5129

Change:

$("input").click(function () { 
  $("div").remove('.dave'); 
});

to

$("input").click(function () {
      $(this).parent().remove();
    });

So basically if you call this within the anonymous jquery function it points to the object calling it, which in this case is your button. You then get the button's parent and remove that.

Upvotes: 6

Related Questions