javascript - 单击删除按钮时删除文本框、hr 和文本

Question

当删除按钮是单击(如下图所示)。

到目前为止，我已经尝试了以下方法，但它不起作用:

$(document).ready(function() {
    // Remove waypoints
    $(".remove-waypoint-button").click(function() {
        $(this).parent.closest('input').remove();
        $(this).parent.closest('hr').remove();
    });
});

Fiddle here

感谢您的帮助。

Answer 1

您需要使用 prev()而不是 closest() .

使用

// Remove waypoints
$(".remove-waypoint-button").click(function () {
    $(this).prev('input').remove();
    $(this).prev('hr').remove();
    $(this).remove();
});

DEMO

但是我建议你将输入和按钮包装在一个 div 中，然后你可以使用 .parent()一次全部删除。这是一个例子。

$(document).ready(function() {
  // Remove waypoints
  $(".remove-waypoint-button").click(function() {
    $(this).parent('div').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="waypoints">
  <div>
    <input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
    <label class="remove-waypoint-button">Remove</label>
  </div>
  <div>
    <input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
    <label class="remove-waypoint-button">Remove</label>
  </div>
</div>