Delete Comment

Describes the request data identifier and the response structure required to implement deleting comments and replies.

Data Identifier

{
  "dataID": "DELETE_COMMENT",
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C"
}
KeyDescription
dataIDBoth comments and replies are deleted with DELETE_COMMENT.
post_keyUnique key of the post the comment belongs to. It is filled automatically from the data-post-key value of the element whose id is post.
comment_keyUnique key of the comment to delete. It is filled automatically from the data-comment-key value of the h-div-comment or h-div-reply-comment area that holds the delete button.

HTML

<div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022">
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6...">
        <p>Comment content is displayed here.</p>
        <a href="#" class="h-btn-reply-delete">DELETE</a>

        <div class="h-div-reply-comment-list" style="display:none;">
            <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1...">
                <p>Reply content is displayed here.</p>
                <a href="#" class="h-btn-reply-delete">DELETE</a>
            </div>
        </div>
    </div>
</div>
  • div
    <div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022"></div>

    The post area. The id must be set to post and data-post-key must hold the post[0].post_key value from the Response Result.

  • div
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6..."></div>

    The area where a single comment is displayed. The class selector must include h-div-comment and data-comment-key must hold the comment_key of that comment.

  • a
    <a href="#" class="h-btn-reply-delete"></a>

    The comment delete button. The class selector must include h-btn-reply-delete and it must be placed inside an h-div-comment area. Note this is a different selector from the post delete button (h-btn-delete).

  • div
    <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1..."></div>

    The area where a single reply is displayed. The class selector must include h-div-reply-comment and data-comment-key must hold the comment_key of that reply.

  • a
    <a href="#" class="h-btn-reply-delete"></a>

    The reply delete button. It uses the same h-btn-reply-delete selector as a comment and must be placed inside an h-div-reply-comment area.

Response Result

{
  "result": true,
  "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
  "comment_count": 12,
  "comment_count_formatted": "12"
}
KeyDescription
resultWhether the comment was deleted
comment_keyUnique key of the deleted comment
comment_countNumber of comments remaining after the deletion
comment_count_formattedComment count with thousands separators applied
  • Clicking the delete button shows a confirm dialog. On confirmation the comment is deleted and the comment list is reloaded automatically.
  • Only comments written by the signed-in member can be deleted. Requesting a delete on another member's comment returns result as false.
  • A deleted comment has its delete_flg changed to Y and is excluded from the list, while the data itself is preserved.

Example

micky 05-30 02:53

Comment content is displayed here.

<div id="post" :data-post-key="output.post[0].post_key">
  <div class="h-div-comment" :data-comment-key="comment.comment_key"
       v-for="comment in output.post[0].comment_list" :key="comment.comment_key">
    <div class="border-bottom px-1 py-3">
      <div class="d-flex justify-content-between align-items-center">
        <strong class="me-1">{{ comment.name }}</strong>
        <small class="text-secondary">{{ comment.create_date }}</small>
      </div>
      <p class="my-2 py-2 mb-0" v-html="comment.comment.split('\n').join('<br>')"></p>
      <div class="text-end">
        <a href="#" class="h-btn-reply-delete rounded-3 py-2 px-3 bg-gray-light ms-2 small"
           v-if="output.user.auth_flg && comment.member_seq == output.user.seq">
          <i class="fas fa-trash"></i> Delete
        </a>
      </div>
    </div>

    <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
      <div class="h-div-reply-comment" :data-comment-key="reply_comment.comment_key"
           v-for="reply_comment in comment.reply_comment" :key="reply_comment.comment_key">
        <span class="text-primary">@{{ reply_comment.to_name }}</span>
        <span v-html="reply_comment.comment.split('\n').join('<br>')"></span>
        <div class="text-end">
          <a href="#" class="h-btn-reply-delete rounded-3 py-2 px-2 border bg-white ms-2 small"
             v-if="output.user.auth_flg && reply_comment.member_seq == output.user.seq">
            <i class="fas fa-trash"></i> Delete
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="post" data-post-key="<?= $output['post'][0]['post_key']; ?>">
    <? foreach ($output['post'][0]['comment_list'] as $arrComment) { ?>
        <div class="h-div-comment" data-comment-key="<?= $arrComment['comment_key']; ?>">
            <div class="border-bottom px-1 py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <strong class="me-1"><?= $arrComment['name']; ?></strong>
                    <small class="text-secondary"><?= $arrComment['create_date']; ?></small>
                </div>
                <p class="my-2 py-2 mb-0"><?= nl2br($arrComment['comment']); ?></p>
                <div class="text-end">
                    <? if ($output['user']['auth_flg'] && $arrComment['member_seq'] == $output['user']['seq']) { ?>
                        <a href="#" class="h-btn-reply-delete rounded-3 py-2 px-3 bg-gray-light ms-2 small">
                            <i class="fas fa-trash"></i> Delete
                        </a>
                    <? } ?>
                </div>
            </div>

            <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
                <? foreach ($arrComment['reply_comment'] as $arrReplyComment) { ?>
                    <div class="h-div-reply-comment" data-comment-key="<?= $arrReplyComment['comment_key']; ?>">
                        <span class="text-primary">@<?= $arrReplyComment['to_name']; ?></span>
                        <span><?= nl2br($arrReplyComment['comment']); ?></span>
                        <div class="text-end">
                            <? if ($output['user']['auth_flg'] && $arrReplyComment['member_seq'] == $output['user']['seq']) { ?>
                                <a href="#" class="h-btn-reply-delete rounded-3 py-2 px-2 border bg-white ms-2 small">
                                    <i class="fas fa-trash"></i> Delete
                                </a>
                            <? } ?>
                        </div>
                    </div>
                <? } ?>
            </div>
        </div>
    <? } ?>
</div>