非同期通信 scss

Question

非同期通信でチャットアプリを作っています
メッセージを吹き出しで囲っています

画像も投稿できるのですが、画像のみで投稿すると

メッセージを入力していないのに吹き出しが出てしまいます
リロードすると吹き出しは消えます

画像のみの投稿の時は吹き出しを表示しないようにしたいです
宜しくお願いします

仮説、検証作業は 調べるとcss :not()があるみたいで、それを使おうと思ったのですが、よくわからなかったです
宜しくお願いします

吹き出し　scss

.message {
  margin-top: 60px;
  &__text {
    position: relative;
    border-radius: 10px;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #f3f6f6;
    &:before {
      content: "";
      position: absolute;
      top: -30px;
      left: 20%;
      margin-left: -15px;
      border: 15px solid transparent;
      border-bottom: 15px solid #f3f6f6;
    }
  }
}

非同期通信 js

$(document).on('turbolinks:load',function(){
  function buildHTML(message){
    var img = message.image ? `<img src= ${ message.image }>` : "";
    var html =  `<div class="message" data-id="${message.id}" >
                  <div class="message__upper-info">
                    <p class="face">
                    <p class="message__upper-info__talker">
                      ${message.user_name}
                    </p>
                    <p class="message__upper-info__date">
                      ${message.created_at}
                    </p>
                  </div>
                  <p class="message__text">
                  ${message.content}
                    <div>
                    </div>
                      ${img}
                  </p>
                </div>`
        return html ;
  }
  $('#new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $('#ajax').removeAttr('data-disable-with');
    var url = $(this).attr('action')
    $('#new_message')[0].reset();
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.messages').append(html);
      $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight});
    })
    .fail(function(){
      alert('エラーが発生しています');
    })
  });

Answer 1

:empty という疑似クラスがありますが、Selectors Level 3 では空白文字を許さないので適用されません。
Selectors Level 4 で許すように変更になっていますが対応したブラウザはないようです。
https://developer.mozilla.org/ja/docs/Web/CSS/:empty

したがって CSS ではなく スクリプト側 (buildHTML) で message.content の有無を判定するのがよさそうです。

Comments

[yakumo02]

回答ありがとうございます
scssの条件分岐とかは使えないんですか？
吹き出しとテキストのクラスはmessage__textなのですが、message__textが存在しない場合はscssを適用しないなど

[x_x]

.message__text は 常に存在していますよね？
存在しないようにするために buildHTML を変えるということです。

[yakumo02]

すみません、調べたのですが判定の仕方がわかりませんでした
${ message.content == null ? まで記述しましたがこの先が分かりませんし、このやり方があっているのかも不安です
全然違うかもしれませんが、has classについても調べてみました
https://www.sejuku.net/blog/54940

[x_x]

buildHTML は ご自分で書いたものではないのでしょうか？
message.image と同じ方法でできるかと思います。
空白文字も考慮するなら .trim() して判定したらいいでしょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim

[yakumo02]

ありがとうございました

[x_x]

うーん、これですかね？
https://qiita.com/kumasuke/items/36365bcdf30eaea65250
変数 img (imgタグが書かれた文字列) が html で埋め込まれているのがわかりますか？
p.message__text も同様に外で作って埋め込めばいいです。