Должен совпадать с оператором if (Textarea & Div)

Question

Я хочу щелкнуть элемент в элементе removeFood и сопоставить его с элементом в текстовой области newFoodName1

$(".removeFood").click(function() {
  var removedFood = ($(this).children('.dailyItem').text())
  $(this).text('')        
  var selectedFood = $("#newFoodName1").text();
  console.log(removedFood + selectedFood)

  if (removedFood == selectedFood) {
    console.log('They Match')
  } else { 
    console.log('they dont match') 
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'> 
  <p class='dailyItem'>
    Eclair
    <i class="fas fa-trash-alt"></i>
  </p>
</div>    
<textarea id='newFoodName1'>Eclair</textarea>

В консоли это журналы Eclair Eclair Однако оператор if говорит, что они не совпадают.Что мне не хватает?

Answer 1

просто обрежьте ваши данные, используя trim ()

$(".removeFood").click(function() {
  var removedFood = ($(this).children('.dailyItem').text().trim())
  $(this).text('')
  var selectedFood = $("#newFoodName1").text().trim();
  console.log(removedFood + selectedFood)

  if (removedFood == selectedFood) {
    console.log('They Match')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'>
  <p class='dailyItem'>
    Eclair
    <i class="fas fa-trash-alt"></i>
  </p>
</div>
<textarea id='newFoodName1'>Eclair</textarea>

Answer 2

Они не совпадают из-за пробелов вокруг значений.Если вы используете trim(), чтобы удалить это, тогда условие if соответствует:

$(".removeFood").click(function() {
  var removedFood = ($(this).children('.dailyItem').text())
  $(this).text('')
  var selectedFood = $("#newFoodName1").text();
  console.log(removedFood + selectedFood)

  if (removedFood.trim() == selectedFood.trim()) {
    console.log('They Match')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'>
  <p class='dailyItem'>
    Eclair
    <i class="fas fa-trash-alt"></i>
  </p>
</div>
<textarea id='newFoodName1'>Eclair</textarea>