JQueryダイアログを使用してhtmlを削除する

Question

現在、ユーザーがデタッチボタンをクリックしたHTML要素を削除したいというメッセージが表示されますが、JQueryダイアログボックスの[OK]ボタンをクリックすると、 div要素をクリックした行クラスと比較します。

jQueryのダイアログボックスを使用しない場合は、次の作品：私は難易度jQueryのダイアログボックスを介して、これを複製するが生じています$(this).closest('.row').remove();

。以下は

exmapleとJSFiddleです：ok: function(){}参照ダイアログで

$(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)ので、それは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>