选择最近的类并使用jQuery将其删除

Question

当用户单击“编辑”时，如何找到最接近的row_form并使用jquery将其删除？
以下是我试过到目前为止的jsfiddle
的HTML

<div id="settings_wrapper">
        <h1>General settings</h1>
        <div class="settings_row">
          <span class="row_name">Name</span>
          <div class="row_edit"><p class="row_edit_button">Edit</p></div>
          <div class="row_form">
            <form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
          </div>
        </div>
        <div class="settings_row">
          <span class="row_name">Name</span>
          <div class="row_edit"><p class="row_edit_button">Edit</p></div>
          <div class="row_form">
            <form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
          </div>
        </div>
      </div>  

JQUERY

 $(document).ready(function(){
      $(".row_edit_button").click(function(){
         $(this).closest(".row_form").remove(); 
      });
});

Answer 1

目标元素是被单击元素的parentNode的下一个同级。 closest选择最匹配的父元素。 一种选择是：

$(".row_edit_button").click(function() {
   $(this.parentNode).siblings(".row_form").remove(); 
});

其他选项是：

$(this).parent().next(".row_form").remove();
$(this).closest('.settings_row').find(".row_form").remove();