如何删除jquery中的特定按钮

Question

how can I remove specific buttons for example i have

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

then i want to delete specific buttons in jquery,i tried use remove function like this

$('button').remove(2)

but it is not working do you know other options to resolve this proplem?

Answer 1

You can also use nth child selector

 $("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>

Answer 2

.remove() accepts an optional selector , not an index.

If you're trying to remove the 3rd button (index 2), try narrowing the selection using .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>

or for multiple consecutive indexes, use .slice()

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

---

If you're trying to remove the button with text content "2" , you can use the :contains() selector or use a more accurate .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>