jquery remove a tags based on query string

Question

I have a list of images inside ap tag inside a div

How can I use jquery to remove the a tags if basket= is equal to one of these empty , semi , abandoned ?

 <div id="userShop"> <p class="shoppingbaskets"> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=empty"><img src="image/empty.png" title="empty" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=full"><img src="image/full.png" title="full" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=semi"><img src="image/semi.png" title="semi" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=abandoned"><img src="image/abandoned.png" title="abandoned" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=completed"><img src="image/completed.png" title="completed" width="50" height="50"></a> </p> </div> 

Answer 1

The URL.searchParams is useful here

 $("#userShop a").each(function(link) { if (["empty","semi","abandoned"].indexOf( new URL(this.href).searchParams.get("basket") ) !=-1) { $(this).remove(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="userShop"> <p class="shoppingbaskets"> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=empty"><img src="image/empty.png" title="empty" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=full"><img src="image/full.png" title="full" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=semi"><img src="image/semi.png" title="semi" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=abandoned"><img src="image/abandoned.png" title="abandoned" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=completed"><img src="image/completed.png" title="completed" width="50" height="50"></a> </p> </div> 

Answer 2

href is an atribute,so you can use it via attribute selector and use $ to match if it ends with your parameter

 var params = ["empty","semi","abandoned"]; for(var i in params){ $("a[href$='basket=" + params[i] + "']").remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="userShop"> <p class="shoppingbaskets"> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=empty"><img src="image/empty.png" title="empty" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=full"><img src="image/full.png" title="full" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=semi"><img src="image/semi.png" title="semi" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=abandoned"><img src="image/abandoned.png" title="abandoned" width="50" height="50"></a> <a href="RunFunction.jsp;jsessionid=123456789?shop=querty&basket=completed"><img src="image/completed.png" title="completed" width="50" height="50"></a> </p> </div> 

Answer 3

Hide elements with value contained in attribute

$("a[href*='basket=empty']").hide();
$("a[href*='basket=semi']").hide();
$("a[href*='basket=abandoned']").hide();

Remove elements with value contained in attribute

$("a[href*='basket=empty']").remove();
$("a[href*='basket=semi']").remove();
$("a[href*='basket=abandoned']").remove();

Answer 4

You could use the .html() property and rewrite all the content of the parent div "userShop", some like this:

if(yourcondition){
$("#userShop").html(".............all the new content.......");
}