CODEWITHSUNDEEP
javascriptjqueryhtml
Aurora Arcade
Aurora Arcade

Reputation: 131

Clearing input text field value with Jquery

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/>

Upvotes: 1

Views: 1236

Answers (3)

iamawebgeek
iamawebgeek

Reputation: 2865

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('');
}

Upvotes: 2

Thomas Rbt
Thomas Rbt

Reputation: 1538

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

input.attr('value','')

Upvotes: 2

Johnboy
Johnboy

Reputation: 425

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

Upvotes: 2

Related Questions