How to remove the text after input field using jquery?

Question

How can I remove the text after the input in jQuery?

jQuery

<div id="date_filter_si">
    <input type="radio" class="date_action" name="date_action" value="Y" checked=""> year
    <input type="radio" class="date_action" name="date_action" value="W" checked=""> Weekly
</div>

Expected Output

<div id="date_filter_si">
    <input type="radio" class="date_action" name="date_action" value="Y" checked=""> 
    <input type="radio" class="date_action" name="date_action" value="W" checked=""> 
</div>

$( "#date_filter_si:contains('Weekly')" ).remove();

Deep · Answer 1 · 2017-01-25T16:36:05.450

2

You can filter the text nodes (element.nodeType == 3) and then remove.

$("#date_filter_si").contents().filter(function() {
    return this.nodeType === 3; 
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date_filter_si">  
    <input type="radio" class="date_action" name="date_action" value="Y" checked="" onclick="set_date_filter('Y')"> year
    <input type="radio" class="date_action" name="date_action" value="W" checked="" onclick="set_date_filter('W')"> Weekly
</div>

edited Jan 25 '17 at 16:36

answered Jan 25 '17 at 16:32

Deep

9,594
2
21
33

i need to remove the both week and year – Question User Jan 25 '17 at 16:34
@QuestionUser It will work for all text nodes. – Deep Jan 25 '17 at 16:36

Mohammad · Accepted Answer · 2017-01-25T16:40:13.110

You can use Node.nextSibling property to change next sibling text of element.

$("#date_filter_si > input")[0].nextSibling.textContent = "";

$("#date_filter_si > input")[0].nextSibling.textContent = "";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date_filter_si">
  <input type="radio" class="date_action"> year
</div>

If you have multiple input and sibling text use this:

$("#date_filter_si > input").each(function(){
    this.nextSibling.textContent = "";
});

$("#date_filter_si > input").each(function(){
  this.nextSibling.textContent = "";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date_filter_si">
  <input type="radio" class="date_action"> year
  <input type="radio" class="date_action"> week
</div>

score 0 · Answer 3 · answered Jan 25 '17 at 16:57

This is how I would do it.

$( "#date_filter_si:contains('Weekly') input" ).each(function(){
  var el = this.nextSibling;
  if(el && el.nodeType === Node.TEXT_NODE) {
    el.parentNode.removeChild(el);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="date_filter_si">
    <input type="radio" class="date_action" name="date_action" value="Y" checked="" onclick="set_date_filter('Y')"> year
    <input type="radio" class="date_action" name="date_action" value="W" checked="" onclick="set_date_filter('W')"> Weekly
</div>

How to remove the text after input field using jquery?

3 Answers3