Conflicting event-handling in jQuery

Question

I have a <div> like this:

<div id="Field1">
  <label id="label1">Name</label><br/>
  <input type="text" data-attr="text" style="..." id="input1"/><br/>
  <label id="instr1"/>
  <div class="xfb-row-options1">
    <a class="button-delete" src="..." style="...">-</a> 
  </div>
</div>

I already have a jQuery function:

$("#fb_contentarea_col1down21 div").live("click", function(){
  // some stuff to change the properties of the Field,
  // like changing the field name, size.
  return false;
});

I have a <div> with a "delete" image button inside it, and I want to delete this on clicking "button-delete1". I tried it with:

$("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(){
  //deleting the Div Field1
  return false;
});

Now both my functions conflict. When I click on "button-delete1", my function #1 gets executed and shows me an error.

Answer 1

Use the remove method to delete the div, and stopPropagation from causing the click event on the delete button from firing the click event on the parent div:

  $("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(e){
      e.stopPropagation();
      $("#Field1").remove();
      return false;
  });