Question

您好我已经添加了新div，但删除无效，我试过父和最接近的元素仍然无法正常工作，一切正常，但删除功能无法正常工作。

Jquery的：

$(document).ready(function() {
    var max_day      = 10; //maximum input boxes allowed
    var newday         = $(".new_day"); //Fields wrapper
    var add_new_day      = $(".add_new_day"); //Add button ID

    var x = 1; //initlal text box count
    $(add_new_day).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_day){ //max input box allowed
            x++; //text box increment
            $(newday).append('<?php include 'newday.php' ?>'); //add input box
        }
    });

    $(add_new_day).on("click",".remove_day", function(e){ //user click on remove text
        e.preventDefault();
        $(this).parents('div.container').remove();
        x--;
    })
});

HTML：

 <div class="col-lg-offset-2 col-lg-9">
      <div class="panel panel-primary" style="border:3px solid #dddddd;;">
        <div class="panel-heading">
          <h3 class="panel-title">Itinerary</h3>
        </div>
        <div class="panel-body" style="background:#FFFFFF;">
          <div>
            <div class="container">
              <div class="row">
                <h4>Trip Activity</h4>
                  <div class="col-lg-3">
                  <label for="inputdefault" class="visible-lg">Time</label>
                    <input type="text" name="mytime[]" class="form-control input-sm" placeholder="00:00 A.M."/>
                  </div>
                  <div class="col-lg-3">
                   <label for="inputdefault" class="visible-lg">Activity</label>
                    <input type="text" name="mytext[]" class="form-control" placeholder="Activity for this time." />
                  </div>
                  <div class="col-lg-3">
                  <br>
                </div>
              </div>
            </div>
             <div class="input_fields_wrap">
             </div>
          </div>
          <div class="col-lg-3">
          <br>
            <button class="add_field_button smoothScroll btn btn-info">Add Activity</button>
<a href="#" class="remove_day">Remove day '+x+'</a>


          </div>
        </div>
      </div>
  </div>

Answer 1

div.container不是remove_day的祖先。使用closest('.panel-body')查找祖先.panel-body，其中包含查找div.container，如下所示。

$(document).on("click", ".remove_day", function(e) {
    e.preventDefault();
    $(this).closest('.panel').remove();
    //x--;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-lg-offset-2 col-lg-9 add_new_day"> 
    <div class="panel panel-primary" style="border:3px solid #dddddd;;">
        <div class="panel-heading">
            <h3 class="panel-title">Itinerary</h3>
        </div>
        <div class="panel-body" style="background:#FFFFFF;">
            <div>
                <div class="container">
                    <div class="row">
                        <h4>Trip Activity</h4>
                        <div class="col-lg-3">
                            <label for="inputdefault" class="visible-lg">Time</label>
                            <input type="text" name="mytime[]" class="form-control input-sm" placeholder="00:00 A.M." />
                        </div>
                        <div class="col-lg-3">
                            <label for="inputdefault" class="visible-lg">Activity</label>
                            <input type="text" name="mytext[]" class="form-control" placeholder="Activity for this time." />
                        </div>
                        <div class="col-lg-3">
                            <br>
                        </div>
                    </div>
                </div>
                <div class="input_fields_wrap">
                </div>
            </div>
            <div class="col-lg-3">
                <br>
                <button class="add_field_button smoothScroll btn btn-info">Add Activity</button>
                <a href="#" class="remove_day">Remove day '+x+'</a>
            </div>
        </div>
    </div>
</div>

Jquery删除Div元素

1 个答案: