Studento919 Studento919 - 3 months ago 14
HTML Question

JQuery remove html via JQuery dialog

I am currently having an issue where I want to remove the HTML element the user clicked the detach button and then will be prompted but when they have clicked the OK button in a JQuery dialog box it remove that div element with the row class they just clicked.

The following works if without using JQuery dialog box:

$(this).closest('.row').remove();


I am having difficulty replicating this via a JQuery dialog box.

Below is an exmaple and a 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

$(this) in ok: function(){} references the dialog and hence it can't remove the div .row.

Have a reference to the .row during detach.click() and use it on the ok: function(){}.

Here is the updated solution.

$(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>