Why isn't my element being emptied as expected?

Question

I'm sure this is very simple but I'm stuck.

I have an input, when a value is entered I would like to append this value to a <span> element. Once the value is deleted from the input, I would like to also remove it from the <span> element.

The issue i'm having is that the input value is removed, but the html 'Name' remains.

Fiddle link.

<input type="search" id="searchName" type="text">
<div id="searchFilter">
  <p><span id="filterName"></span></p>
</div>

$('#searchName').keyup(function() {
  if ($('#searchName').length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

Any help is appreciated.

It doesn't look like `.empty()` is ever getting called. You never go into that else statement — blackandorangecat, Nov 30 '17 at 16:58

score 4 · Accepted Answer · answered Nov 30 '17 at 16:58

4

Evaluate the length of the val(), not the element itself:

$('#searchName').keyup(function() {
  if ($('#searchName').val().length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

Fiddle

answered Nov 30 '17 at 16:58

WillardSolutions

2,316
4
28
38

Keep in mind this doesn't work if the element is cleared by clicking the `x` – blackandorangecat Nov 30 '17 at 17:00
Thanks @blackandorangecat - probably a separate question but what if the element is cleared by clicking the x ? – TheOrdinaryGeek Nov 30 '17 at 17:04
@TheOrdinaryGeek `$('#searchName').on('search', function () { $("#filterName").empty(); });` – blackandorangecat Nov 30 '17 at 17:06
Add that (new listener) above/below the answer above. – blackandorangecat Nov 30 '17 at 17:07
@TheOrdinaryGeek https://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input – blackandorangecat Nov 30 '17 at 17:08

score 0 · Answer 2 · answered Nov 30 '17 at 16:59

With a few modif. it's ok :-)

$('#searchName').on("keyup",function() {
  if ($('#searchName').val() != "") {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").text("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="searchName" type="text">
<div id="searchFilter">
  <p><span id="filterName"></span></p>
</div>

score 0 · Answer 3 · answered Nov 30 '17 at 17:00

0

Change the condition in the if to:

$('#searchName').val().length > 0

answered Nov 30 '17 at 17:00

Nikola Yankov

1,264
1
15
28

score 0 · Answer 4 · answered Nov 30 '17 at 17:01

If you assign the keyup to the body element, not the input box itself then it will register the event and work -

$('body').keyup(function() {
  if($('#searchName').length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

Fiddle link - https://jsfiddle.net/age3nyph/4/

score 0 · Answer 5 · answered Nov 30 '17 at 17:15

I would handle the 'search' and 'keyup' events to account for users clicking the 'x' and users typing in the field. See JSFiddle Example

$('#searchName').on('keyup', function() {
updateFilter(this);
});

$('#searchName').on('search', function(){
updateFilter(this);
});

function updateFilter(element){
if ($(element).val().length > 0) {
    $("#filterName").text('Name: ' + $(element).val());
 } else {
$("#filterName").empty();
 }
};

Edit: Updated link to point at JSFiddle setup to use JQuery. Original link excluded that update.

Why isn't my element being emptied as expected?

5 Answers5