Refactor diese JavaScript-Code

Question

Ich habe zwei Klick-Ereignisse, die fast ähnlich sind, aber nicht ganz. Ich frage mich, wie man sie am besten refaktoriert:

$('.remove_fields.dynamic').live('click', function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.closest(".nested-fields").remove(); 
    trigger_after_removal_callback(after_removal_trigger_node); 
    }); 

    $('.remove_fields.existing').live('click', function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.prev("input[type=hidden]").val("1"); 
    $this.closest(".nested-fields").hide(); 
    trigger_after_removal_callback(after_removal_trigger_node); 
    }); 

Wie Sie feststellen können, gibt es ein gutes Stück Überlappung. Ich frage mich, wie der beste/schönste Weg wäre, diesen Code zu überarbeiten.

Answer 1

Führen Sie eine Klassenprüfung in der .remove_fields Klick-Funktion durch.

$('.remove_fields').click(function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    if($this.hasClass("dynamic") { 
     $this.closest(".nested-fields").remove(); 
    } else if($this.hasClass("existing")) { 
     $this.prev("input[type=hidden]").val("1"); 
     $this.closest(".nested-fields").hide(); 
    } 
    trigger_after_removal_callback(after_removal_trigger_node); 
}); 

Answer 2

Kombinieren Sie die Selektoren in $('.remove_fields.dynamic, .remove_fields.existing').

Dann testen, ob $this die Klasse existing hat. Wenn ja, führen Sie $this.prev("input[type=hidden]").val("1");.

Fertig.

Answer 3

nehmen die Reinigung ein bisschen mehr:

$('.remove_fields').click(function(e) { 
    e.preventDefault(); 

    var $this = $(this); 
    var $nestedFields = $this.closest(".nested-fields"); 

    trigger_removal_callback($this); 

    if($this.hasClass("dynamic") { 
     $nestedFields.remove(); 
    } else if($this.hasClass("existing")) { 
     $this.prev("input[type=hidden]").val("1"); 
     $nestedFields.hide(); 
    } 

    trigger_after_removal_callback($nestedFields.parent()); 

});