[ANSWERED] javascript – Is it possible to hide an empty row with CSS?

By

Nov 20, 2022 , ,

Solution 1 :

First, since you aren’t submitting the data to any other resource, you shouldn’t be using a form or a submit button.

Now, the simplest solution is to just perform validation on the inputs before building the table. if the input is empty, don’t build those rows.

Lastly, don’t use .innerHTML when the string you are working with doesn’t contain any HTML. Use .textContent instead because .innerHTML has performance and security considerations.

let inputTitle = document.getElementById("inputTitle");
let inputSteps = document.getElementById("inputSteps");

document.querySelector("button").addEventListener("click", function (event) {
  // First, just check to see if there was valid input
  if(!inputTitle.value || !inputSteps.value){
    alert("You must fill in a title and a recipe");
    return;  // Exit function
  }
  let titleRow = table.insertRow();
  let stepsRow = table.insertRow();
  let titleCell = titleRow.insertCell();
  let stepsCell = stepsRow.insertCell();
  titleCell.textContent = inputTitle.value;
  stepsCell.textContent = inputSteps.value;
  titleCell.contentEditable = true;
  stepsCell.contentEditable = true;
});
<label>Insert Recipe: </label>
<textarea id = "inputTitle" rows="1" cols="50" placeholder="Recipe Title"></textarea>
<textarea id = "inputSteps" rows = "5" cols = "50" placeholder="Recipe Steps"></textarea>
<button type="button">Add Recipe</button>
<table id = "table"></table>

Problem :

I just starting learning the basics of JavaScript and HTML5. I’m trying to create a cookbook app where users can add recipes. These recipes are stored inside of an array and looped through a table with a for loop. The user can also edit the table. One of the main features is supposed to be that when a row of the table is empty, it automatically gets deleted. I tried using display: none with CSS, but it doesn’t work. Here is my CSS for the table:

form.addEventListener("submit", function (event) {
  let titleRow = table.insertRow();
  let stepsRow = table.insertRow();
  let titleCell = titleRow.insertCell();
  let stepsCell = stepsRow.insertCell();
  titleCell.innerHTML = inputTitle.value;
  stepsCell.innerHTML = inputSteps.value;
  titleCell.contentEditable = true;
  stepsCell.contentEditable = true;
  inputTitle.value = inputTitle.defaultValue;
  inputSteps.value = inputSteps.defaultValue;
}, false);
td: empty {
    display: none;
}
tr: empty {
    display: none;
}
<form id="form">
           <label>Insert Recipe: </label>
	       <textarea id = "inputTitle" rows="1" cols="50" placeholder="Recipe Title"></textarea>
           <textarea id = "inputSteps" rows = "5" cols = "50" placeholder="Recipe Steps"></textarea>
	       <button type="submit">Add Recipe</button>
</form>
<table id = "table"></table>

The table element refers to an HTML5 table, inputTitle refers to one textarea, and inputSteps refers a different textarea.

I may have mistakes in my JavaScript.

Thanks in advance!

Comments

Comment posted by Scott Marcus

Please add the relevant HTML as well.

Comment posted by Ashish Sondagar

Provide snippet code! That help us to fix your problem

Comment posted by Turnip

There should not be a space before

Comment posted by Turnip

:empty

Comment posted by Turnip

The question was about hiding empty table cells.

Comment posted by Scott Marcus

@Turnip Yes, but often times the OPs have coded themselves into situations that they didn’t realize they could avoid in the first place. This is one of those.

Comment posted by Scott Marcus

@JSProgrammer Without validation, you’ll have to loop over each cell of the new row and determine if they are all empty. Then, if they are, you’ll have to either remove or hide the row. Can this be done? Sure, is this how anyone would do it? Certainly not. Form validation exists for exact circumstances such as this – to prevent bad data that would then make you have to accommodate for it in your program.

Comment posted by Scott Marcus

@JSProgrammer No, it won’t, which is why validation is the proper solution. The

By

Leave a Reply

Your email address will not be published. Required fields are marked *