CODEWITHSUNDEEP
javascriptjqueryhtml
Studento919
Studento919

Reputation: 635

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>

Upvotes: 1

Views: 56

Answers (1)

Pugazh
Pugazh

Reputation: 9561

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

Upvotes: 1

Related Questions