Противоречивая обработка событий в jQuery

Question

У меня есть <div>, как это:

<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>

У меня уже есть функция jQuery:

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

У меня есть <div> с кнопкой «удалить» внутри, и я хочу удалить ее, нажав «button-delete1». Я попробовал это с:

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

Теперь обе мои функции конфликтуют. Когда я нажимаю «button-delete1», моя функция # 1 выполняется и показывает ошибку.

Answer 1

Используйте метод remove для удаления div, и stopPropagation от вызова события click на кнопке удаления до запуска события click для родительского div:

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