Clearing input text field value with Jquery

Question

I seem to be able to hide the resource container using

resource.parent().parent().hide();

but I don't understand why the input value is not clearing with

resource.parent().siblings('.resource-value').children('input').val('');

when I use

resource.parent().siblings('.resource-value') I get the parent of the input value but adding .children('input').val('') on top of that does nothing or if I add .children('input:text').val('')

I have very similar code for something else which works just fine, looked at other questions and not sure what I'm missing.

function removeResource(resource) {
    'use strict';

    //hide resource on screen
    resource.parent().parent().hide();

    //set resource text value to ''
    resource.parent().siblings('.resource-value').children('input').val('');
}

(function($) {
    'use strict';

    $(function() {
        $('#resources').on('click', '.remove-resource', function(evt) {
            // Stop the anchor's default behavior
            evt.preventDefault();

            // Remove the image, toggle the anchors
            removeResource($(this));
        });
    });
})(jQuery);

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="resources">
     <div class="resource">
        <div class="resource-value">
           <input type="text" name="resources[]" value="1" />
        </div>
        <p class="hide-if-no-js"><a title="remove resource" href="javascript:;" class="remove-resource">remove resource</a > </p>
        <!-- .hide-if-no-js -->
     </div>
     <div class="resource">
        <div class="resource-value">
           <input type="text" name="resources[]" value="2"/>
        </div>
        <p class="hide-if-no-js"><a title="remove resourcee" href="javascript:;" class="remove-resource">remove resource</a> </p>
        <!-- .hide-if-no-js -->
     </div>
  </div>
   </body>
<html/>

Johnboy · Accepted Answer · 2015-02-13 13:18:09Z

2

Tried your code and worked fine for me in terms of the actual value of the field clearing, though in inspector the HTML element still has the value attribute showing.

You can use

.attr('value','')

to clear that too http://jsfiddle.net/bvtg93dm

answered Feb 13, 2015 at 13:18

Johnboy

4255 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aurora Arcade Over a year ago

Interesting, thank you. This works in clearing any value from the inspector which solves the issue I was having.

Aurora Arcade Over a year ago

I have a line in a nearly identical function similar html structure but this one is for removing images and the line to remove an image goes image.siblings('.image-meta-info').children().val(''); This will also clear the value in the inspector so I'm wondering why things are different in this case.

Thomas Rbt · Accepted Answer · 2015-02-13 13:23:16Z

2

You just have to change the value witch jquery to set "" (so, empty).

input.attr('value','')

answered Feb 13, 2015 at 13:23

Thomas Rbt

1,5421 gold badge15 silver badges29 bronze badges

Comments

iamawebgeek · Accepted Answer · 2015-02-13 13:30:59Z

2

Try to log your sibling element with Try to change your removeResource function to

function removeResource(resource) {

  'use strict';

  //hide resource on screen
  var parent = resource.parent().parent();
  parent.hide();

  // log your element
  console.log(parent.find('.resource-value input'));
  // make sure you are getting an element you need
  console.log(parent.siblings('.resource-value').childer('input').get(0);
  //set resource text value to ''
  parent.find('.resource-value input').val('');
}

edited Feb 13, 2015 at 13:30

answered Feb 13, 2015 at 13:13

iamawebgeek

2,8951 gold badge22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Clearing input text field value with Jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related