如何删除同一页面上的不同项目

Question

我如何在不重新加载页面的情况下删除同一页面上的不同项目，就像我想删除一些项目并留下 rest

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove();
  });
});
</script>
</head>
<body>

<div>
<p>remove this paragraph</p><button>close</button>
<p>leave this paragraph</p><button>close</button>
<p>remove this paragraph</p><button>close</button>
<p>leave this paragraph</p><button>close</button>
</div>
</body>
</html>

Answer 1

这里有一种方法可以删除按钮和按钮的上一段：

$(document).ready(function(){
  $('button').click(function(){
    $( this ).prev('p').remove();
    $( this ).remove();
  });
});

在那里演示： https://codepen.io/aureliendebord/full/vYNqdrw

Answer 2

好吧，您需要更改 html 以定位要为其添加自定义class的项目，例如：

<p>remove this paragraph</p><button>close</button>
<p>leave this paragraph</p><button>close</button>
<p class="item-to-remove">remove this paragraph</p><button>close</button>
<p>leave this paragraph</p><button>close</button>

因此您还需要更改 javascript 中的 CSS 选择器：

$(document).ready(function(){
  $("button").click(function(){
    $(".item-to-remove").remove();
  });
});

如何删除同一页面上的不同项目

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-05-28 20:28:47

解决方案2
-1 2020-05-28 21:30:21

如何删除同一页面上的不同项目

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-05-28 20:28:47

解决方案2 -1 2020-05-28 21:30:21

解决方案1
0 已采纳 2020-05-28 20:28:47

解决方案2
-1 2020-05-28 21:30:21