CODEWITHSUNDEEP
jquerytwitter-bootstrapplayframework-2.0
myborobudur
myborobudur

Reputation: 4435

Remove Dom Element with jQuery

I try to remove a div out of the dom-tree with jquery in a play application like this:

<form class="form-search">
    <input type="text" class="input-medium search-query" placeholder="@Messages.get("frontend.wiki.search.placeholder")">
    <button type="submit" class="btn btn-primary" id="searchButton" onclick="search()">@Messages.get("frontend.wiki.search")</button>
</form>

@* most read articles *@
<div class="row" id="mostread">
    @components.wikitable(Messages.get("frontend.wiki.mostread"), WikiArticle.findAllMostReadArticles(5))
</div>

.....

<script type="text/javascript">
    var search = function() {
        $('#mostread').empty();
    }
</script>

The "mostread" part on the page disappears for one second when I click the button but everything is back as it was afterwards. Why is that? Using bootstrap too.

Upvotes: 0

Views: 1815

Answers (2)

Kapil
Kapil

Reputation: 1810

Instead of keeping your button type as "submit", you can keep it as just "button" so now it should be

<button type="button" class="btn btn-primary" id="searchButton" onclick="search()">@Messages.get("frontend.wiki.search")</button>

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50573

Use .detach() for that if you plan to reinsert it later:

var elem = $('#mostread').detach();

In case you don't care reinserting, just use remove(): 

$('#mostread').remove();

Upvotes: 1

Related Questions