如何在jquery中删除特定的按钮

Question

如何删除特定的按钮，例如我有

<div>
<button>1</button>
<button>2</button>
<button>3</button>
</div>

然后我想删除特定的按钮在jquery中，我尝试使用remove函数像这样

$('button').remove(2)

但是它不工作，你知道其他解决这个问题的方法吗?

Answer 1

.remove()接受一个可选的选择器，不是索引。

如果你想删除第三个按钮(索引2)，尝试使用.eq()缩小选择

$("button").eq(2).remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js" integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
</div>

或者对于多个连续索引，使用.slice()

$("button").slice(0, 2).remove() // remove the first two

---

如果您试图删除带有文本内容"2">的按钮，您可以使用:contains()选择器或使用更精确的。filter()

// $("button").remove(":contains(2)")
$("button").filter((index, el}) =>
el.textContent.trim() === "2").remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js" integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
</div>

Answer 2

也可以使用第n个子选择器

$("button:nth-child(2)").remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
</div>