CODEWITHSUNDEEP
jquery
cphill
cphill

Reputation: 5914

jQuery Unable to remove Div

I am trying to figure out the reason why I cannot remove my div and its contents despite properly targeting the div in my jQuery. As a result I am wondering if .remove() is the proper method to remove the selection or if there is a better method to use.

var startDateField = '<div class="form-inline data-date-wrapper"><label for="data-start-range">Data Date Start:</label><input type="date" name="dataDateStart"></div>';
var endDateField = '<div class="form-inline data-date-wrapper"><label for="data-end-range">Data Date End:</label><input type="date" name="dataDateEnd"></div>';

if ($('#data-date-start').val() && $('#data-date-end').val()) {
  $("#date-range-add-link").hide();

  $("#date-range-add-link").on('click', function() {
    $("#date-range-add-link").hide();
    $("#date-range-remove-link").show();
    $(".add-remove-date-range").append(startDateField);
    $(".add-remove-date-range").append(endDateField);
    console.log(startDateField);
    console.log(endDateField);
  });

  $("#date-range-remove-link").on('click', function() {
    $("#date-range-add-link").show();
    $("#date-range-remove-link").hide();
    $(".form-inline data-date-wrapper").remove();
    $(".form-inline data-date-wrapper").remove();
  });

} else {
  $("#date-range-remove-link").hide();

  $("#date-range-add-link").on('click', function() {
    $("#date-range-add-link").hide();
    $("#date-range-remove-link").show();
    $(".add-remove-date-range").append(startDateField);
    $(".add-remove-date-range").append(endDateField);
    console.log(startDateField);
    console.log(endDateField);
  });

  $("#date-range-remove-link").on('click', function() {
    $("#date-range-add-link").show();
    $("#date-range-remove-link").hide();
    $(".form-inline data-date-wrapper").remove();
    $(".form-inline data-date-wrapper").remove();
  });
};
});
<div class="add-remove-date-range">
  <a href="#" id="date-range-add-link">Add Report Date Range</a>
  <a href="#" id="date-range-remove-link">Remove Report Date Range</a>
</div>
<div class="form-inline data-date-wrapper">
  <label for="data-start-range">Data Date Start:</label>
  <input type="date" id="data-date-start" name="dataDateStart" value="{{annotation.dataDateStartSlug}}">
</div>
<div class="form-inline data-date-wrapper">
  <label for="data-end-range">Data Date End:</label>
  <input type="date" id="data-date-end" name="dataDateEnd" value="{{annotation.dataDateEndSlug}}">
</div>

Upvotes: 0

Views: 42

Answers (2)

SSG
SSG

Reputation: 66

You are using the right API. Please make the changes in the selector.

$(".form-inline data-date-wrapper").remove();

change to

$(".form-inline.data-date-wrapper").remove();

The class names mentioned in the selector is of a single element, so there should be no spaces while mentioning multiple classes and a period(.<classname1>.<classname2>) must be preceded for every class.

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

No, the selector isn't correct for class based selection. Change

$(".form-inline data-date-wrapper").remove();

to

$(".form-inline .data-date-wrapper").remove();

Upvotes: 2

Related Questions