Question

我正在开发一个php页面，它在按钮点击上添加一个li元素，由于jquery可以排序。我遇到的问题是关闭/删除那个li元素。以下是我正在使用的内容：

正在发生的是从页面中删除所有li元素，我想要的是要删除的父li。

我已经检查过但找不到任何解决问题的方法。

Jquery Remove | Delete Parent | Remove Parent

我相信这与我的jquery有关，但我无法找到答案。

$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});
$(document).ready(function() {
  $("#button").click(function() {
    $("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="" class="close">x</a><div id="box-name">Test 1</div></div></div></li>');
  });
});
$(document).on('click', '.close', function() {
  $(this).parent('.ui-state-default').remove();
  //$(this).closest('.ui-state-default').fadeOut(300);
});

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 120px;
}
#sortable li {
  margin: 1%;
  float: left;
  width: 23.00%;
  height: 97.5%;
  font-size: 4em;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px .5px #000;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<script>
</script>

<body>
  <div id="">
    <!-- button to add li -->
    <input type="button" id="button" value="Click me">
  </div>
  <div class="data">
    <!-- Container div -->
    <ul id="sortable">
      <!-- beginning of sortable list -->

      <li class="ui-state-default">
        <!-- li class that is duplicated -->
        <div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;">
          <a class="close" id="close" href="">
            <!-- a tag to close li -->
            x
          </a>
          <div id="box-name">Test 1</div>
        </div>
  </div>
  </li>
  </ul>
  </div>
</body>

</html>

Answer 1

实际上没有调用click事件侦听器，因为您正在离开初始页面。当您单击锚元素时，href为空，这会将您重定向到空白页面。因此，所有元素都没有删除，实际上你只是在看一个空白页面。

您可以将href属性更改为href="#"，以便缓解此问题。

您也可以致电event.preventDefault()以阻止此默认行为：

$(document).on('click', '.close', function(event) {
  event.preventDefault();

  $(this).closest('.ui-state-default').fadeOut(300);
});

此外，您还需要将id="close"更改为class="close"，因为这是您的jQuery选择器所针对的内容。值得一提的是id必须是唯一的。如果您发现自己重复id，请改用一个类。

这是一个更新的例子：

＆＃13;

$("#sortable").sortable();
$("#sortable").disableSelection();

$("#button").click(function() {
  $("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a class="close" href="#">x</a><div id="box-name">Test 1</div></div></div></li>');
});

$(document).on('click', '.close', function(event) {
  event.preventDefault();

  $(this).closest('.ui-state-default').fadeOut(300);
});

＆＃13;

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 120px;
}
#sortable li {
  margin: 1%;
  float: left;
  width: 23.00%;
  height: 97.5%;
  font-size: 4em;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px .5px #000;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <input type="button" id="button" value="Click me">
</div>
<div class="data">
  <ul id="sortable">
    <li class="ui-state-default">
      <div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;">
        <a class="close" href="#">x</a>
        <div id="box-name">Test 1</div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

我假设你指的是这个$.fadeOut()行，它会隐藏页面中的元素（虽然不$.remove()）

$(document).on('click', '.close', function() {
    // $(this).parent('.ui-state-default').remove();
    $(this).closest('.ui-state-default').fadeOut(300);
});

在你的jquery中，你附加了这个

    $("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="">x</a><div id="box-name">Test 1</div></div></div></li>');

但是你通过这个点击处理程序隐藏了元素

$(document).on('click', '.close', function() {

您的点击处理程序引用.close，但在jQuery追加中，您只需添加#close。因此，将jquery中的代码更改为<a id="close" href="">到<a id="close" href="" class="close">。这是完整的一行

$("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="" class="close">x</a><div id="box-name">Test 1</div></div></div></li>');

Answer 3

您可以使用jquery first或nth selector

https://api.jquery.com/first-selector/

$( "ul li:first" )

https://api.jquery.com/nth-child-selector/

$( "ul li:nth-child(2)" )

如果需要，可以将它们合并

$( "ul:first li:nth-child(2)" )

.Remove（）删除所有div元素

3 个答案: