Question

当用户点击＆＃34;编辑＆＃34;如何找到最近的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();

选择最接近的类并使用jQuery删除它

1 个答案: