JQuery通过jQuery对话框删除html

Question

我目前有一个问题，我想删除用户点击分离按钮的HTML元素，然后会提示，但是当他们点击了一个JQuery对话框中的确定按钮，它会删除div元素与他们刚才点击的行类。

如果不使用JQuery对话框中的以下工作：$(this).closest('.row').remove();

我有困难通过JQuery的对话框复制此。

下面是一个〔实施例和JSFiddle：

$(document).on("click", ".detach", function() { 
 
    var detachvalue = $(this).closest('div').prev().find('input.detachval').val(); 
 
    $("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({ 
 
    modal: true, 
 
    buttons: { 
 
     Ok: function() { 
 
     $(this).closest('.row').remove(); 
 
     console.log(detachvalue); 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Answer 1

$(this)在ok: function(){}引用对话框，因此它不能删除DIV .row。

在detach.click()期间提及.row并在ok: function(){}上使用它。

这里是更新的解决方案。

$(document).on("click", ".detach", function() { 
 
    var $row = $(this).parents('.row'); 
 
    var detachvalue = $(this).closest('div').prev().find('input.detachval').val(); 
 

 
    $("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({ 
 
    modal: true, 
 
    buttons: { 
 
     Ok: function() { 
 
     $row.remove(); 
 
     console.log(detachvalue); 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group col-md-5"> 
 
    <input type="text" class="form-control col-md-4 detachval" placeholder="No number currently"> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <button type="submit" class="btn btn-primary form-control detach">Detach</button> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>