CODEWITHSUNDEEP
javascriptjquery
glarkou
glarkou

Reputation: 7101

Remove all label elements from JQuery variable

I use the following:

var transferTemplate = $('#transfersRow').html();

in order to store some html code in a variable, which results to:

<div class="form-group row">

     <div class="col-lg-4">
         <label for="inc[1].a">Counterparty</label>
         <input type="text" class="form-control" id="inc[1].a" 
                name="inc[1].a" placeholder="Enter Counterparty">
     </div>

</div>

Now I would like to be able to remove all labels from the html code. I tried: 

$(transferTemplate).find(label).remove();

$(transferTemplate).remove('label');

$(transferTemplate).filter('label').remove();

but none works.

Upvotes: 1

Views: 1488

Answers (4)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

This returns a string representation of the HTML:

var transferTemplate = $('#transfersRow').html();

You could remove the label from this string like this:

$(transferTemplate).find('label').remove();

However, all that does it create a new jQuery object with the HTML minus the label. It won't update the transferTemplate variable.

Instead, you could assign $(transferTemplate) to a new variable.

That would allow you to remove the label and still have access to the updated HTML.

Snippet

var transferTemplate = $('#transfersRow').html(),
    template = $(transferTemplate);

template.find('label').remove();

$('textarea').val(template.html());
textarea {
  width: 100%;
  height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="transfersRow">
  <div class="form-group row">
    <div class="col-lg-4">
      <label for="inc[1].a">Counterparty</label>
      <input type="text" class="form-control" id="inc[1].a" name="inc[1].a" placeholder="Enter Counterparty">
    </div>
  </div>
</div>
<hr>
<strong>Output</strong>
<textarea></textarea>

Upvotes: 1

Ricardo Ruwer
Ricardo Ruwer

Reputation: 589

Well, I guess the correct way is: $(transferTemplate).find('label').remove();

https://api.jquery.com/remove/ Like the penultimate example...

Upvotes: 0

Alejandro Ocampo
Alejandro Ocampo

Reputation: 266

I think that you are misunderstanding the result of html(). It doesn't return a Jquery DOM object. The result is just a string representation. Just remove the .html() and I'm sure you will be able to call the functions you want.

var transferTemplate = $('#transfersRow');

Upvotes: 2

Gabriel Papke Paganini
Gabriel Papke Paganini

Reputation: 41

First, you need to select the row that you want to remove labels at each row:

Like this:

$(".row").each(function( index ) {
   $(this).find("label").remove(); //find label at each row and remove.
});

I hope that helps.

Upvotes: 2

Related Questions