How do I delete text within an element without deleting children?

Question

How do i can remove the "John Doo" text in this block and then add some html content?

<label><input type="radio" name="field-value-1359303" value="Joe Doe">Joe Doe</label>

My "solution"

$('input[value="Joe Doe"]')
  .hide()
  .parents('label')
  ????
  .append('<div>my content</div>');

The end result should be as follows:

<label><input type="radio" name="field-value-1359303" value="Joe Doe"><div>my content</div></label>

Use the .text() function for that : https://api.jquery.com/text/ — Lk77, Oct 21 '22 at 09:02
try look at https://stackoverflow.com/questions/2715167/jquery-how-to-remove-the-text-but-not-the-children-elements — Carsten Løvbo Andersen, Oct 21 '22 at 09:03
Did you want to remove the entire `radio` button? Or just change the text for the radio? Seems you don't need the `label` if there's no `radio` (so you would replace the label's parent) — freedomn-m, Oct 21 '22 at 09:04
I want to hide the radio button and the text next to it. And add my content inside the label where the hidden radio button is located. Update description in question — Alexandr Timoshchuk, Oct 21 '22 at 09:27
@Lk77 but $('label').text() delete all content inside. And i want to save input element, but delete text after input — Alexandr Timoshchuk, Oct 21 '22 at 09:47

mbofos01 · Answer 1 · 2022-10-21T09:47:56.667

1

You could use vanilla javascript (not jQuery)

NOTE: for this code to run as is you have to add id="lab" to the label element.

1st solution (innerHTML is not the best decision)

let label = document.getElementById('lab');
const kid  = label.children[0];
let new_message = "Jane Doe";
label.innerHTML = "";
label.appendChild(kid);
label.innerHTML = label.innerHTML + new_message;

With this solution I assume you can have access to the label element.

2nd solution (you have to change the structure of your html)

let label = document.getElementById('lab');
const kid  = label.children[0];
let span = document.createElement('span');
let new_message = "Jane Doe";
span.textContent = new_message;
while (label.firstChild) {
    label.removeChild(label.firstChild);
}
label.appendChild(kid);
label.appendChild(span);

Personally I would go with the second solution because innerHTML can lead to problems and I don't think an additional span would create any issues.

edited Oct 21 '22 at 09:47

answered Oct 21 '22 at 09:47

mbofos01

51
1
1
10

Thank you! But there's a small problem - I have a lot of elements and I don't know what content will be inside them. So I can't hardcode "jane doe" because every day there will be new content in that label. – Alexandr Timoshchuk Oct 21 '22 at 09:57
You can use variables, for text and other elements too. Can you be more specific on what types your content can be on? Anyhow I believe you can use this code as a base. e.g. you can add instead of a span a div with other elements inside it – mbofos01 Oct 21 '22 at 10:29
FYI you *can* use jquery, using `.contents()` and filter on `this.nodeType == 3` - see provided existing answer(s). – freedomn-m Oct 21 '22 at 14:39

score 1 · Answer 2 · edited Oct 21 '22 at 14:44

1

You must declare a param to save the input, clear label body by html() before appending the input and div

const input = $("input[value='Joe Doe']");
$('label').html("").append(input).append('<div>my content</div>');

<script src="https://code.jquery.com/jquery-3.6.1.slim.js"></script>
<label><input type="radio" name="field-value-1359303" value="Joe Doe">Joe Doe</label>

edited Oct 21 '22 at 14:44

freedomn-m

27,664
8
35
57

answered Oct 21 '22 at 09:54

yyater97

1,697
2
9
5

How do I delete text within an element without deleting children?

2 Answers2