How to get an span from its textnode or text content?-CodePudding

I have a form with 3 fields:

            <form id="book-form">
            <div class="form-group">
              <label for="title">Title</label>
              <input type="text" name="title" class="form-control" placeholder="Enter a title">
            </div>
            <div class="form-group">
              <label for="author">Author</label>
              <input type="text" name="author" class="form-control" placeholder="Enter the author of the book">
            </div>
            <div class="form-group">
              <label for="isbn">ISBN#</label>
              <input type="text" name="isbn" class="form-control" placeholder="Enter the book isbn">
            </div>
            <button type="submit" class="btn btn-primary btn-block">Add Book to store</button>
        </form>

Here are I am retrieving the value of these fields that I will insert in their respective span in the html.

const title = document.getElementsByName('title')[0].value
const author = document.getElementsByName('author')[0].value
const isbn = document.getElementsByName('isbn')[0].value

Now I have three span tags where the value of these form fields are suppose to be inserted.

<span class="title">// the value of title</span>
<span class="author">// the value of author</span>
<span class="isbn">// the value of isbn</span>

Now I have a function that checks if the retrieve from the fields of the form is not empty(null) if that is the case I want to remove the span that is was suppose to be in the dom.

function insertMe(fieldValue) {
if (fieldValue === "") {
    // How to remove the span that it was suppose to go
} else {
    return fieldValue
}

}

CodePudding user response：

It's not clear how you're calling insertMe, and the name of that function is misleading because you're only removing elements, not adding them.

I'd approach it this way.

When the button is clicked/onSubmit call the function and use querySelectorAll to target all the inputs by class. Iterate over them and if the value is an empty string remove the span whose class matches the name of the input, otherwise set the text content of the span to the input value.

const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);

function handleClick() {
  const inputs = document.querySelectorAll('.form-control');
  inputs.forEach(({ name, value }) => {
    const el = document.querySelector(`span.${name}`);
    if (el && !value) {
      el.remove();
    } else {
      el.textContent = value;
    }
  });
  
}

<input type="text" class="form-control" name="title" placeholder="Enter a title">
<input type="text" class="form-control" name="author" placeholder="Enter an author">
<input type="text" class="form-control" name="isbn" placeholder="Enter an ISBN number">
<button>Click</button>
<br/><br/>
<span class="title">Title</span><br/>
<span class="author">Author</span><br/>
<span class="isbn">ISBN</span><br/>