为什么这个 javascript 代码不能完美运行？-解网

问：

<!-- ---- Individual Post starts ----- -->
                <div class="individual-post-box w-100 d-flex flex-column">

                    <!-- ----- Post Bar Top starts ----- -->
                    <div class="post-bar-top-cover d-flex align-items-center justify-content-center w-100">
                        <div class="post-bar-top-header d-flex flex-row align-items-center justify-content-between">
                            <div class="post-bar-top-box-1 d-flex flex-row align-items-center justify-content-center">
                                <div class="top-bar-sl-num-label">No.</div>
                                <div class="top-bar-post-label">Post</div>
                            </div>
                            <div class="post-bar-top-box-2 d-flex flex-row align-items-center justify-content-between">
                                <div class="top-bar-published-label">Published</div>
                                <div class="top-bar-comments-label">Comments</div>
                                <div class="top-bar-shares-label">Shares</div>
                                <div class="top-bar-impressions-label">Impressions</div>
                            </div>

                            <div class="dropdown-content-box all-post-dropdown-mob d-flex flex-row align-items-center justify-content-between">

                                <div class="custom-dropdown-category">
                                    <div class="drop-cont-category d-flex flex-row align-items-center justify-content-between">
                                        <div class="selected-option-category">
                                            Categories
                                        </div>
                                        <img class="dropdown-arrow-category" src="./assets/img/svg/dropdown-arrow-down-icon.svg"
                                            alt="dropdown-arrow-down-icon/svg">
                                    </div>
                                    <ul class="dropdown-options-category">
                                        <li class="option-category">Category 1</li>
                                        <li class="option-category">Category 2</li>
                                        <li class="option-category">Category 3</li>
                                    </ul>
                                </div>
        
                                <div class="custom-dropdown-filters" id="customDropdownFilters">
                                    <div class="drop-cont-filters" onclick="toggleDropdownFilters()">
                                        <div class="selected-option-filters">
                                            Filters
                                        </div>
                                        <img class="dropdown-arrow-category" src="./assets/img/svg/dropdown-arrow-down-icon.svg"
                                            alt="dropdown-arrow-down-icon/svg">
                                    </div>
                                    <ul class="dropdown-options-filters" id="dropdownOptionsFilters">
                                        <li class="option-filters" onclick="selectFilter('Filter 1')">Filter 1</li>
                                        <li class="option-filters" onclick="selectFilter('Filter 2')">Filter 2</li>
                                        <li class="option-filters" onclick="selectFilter('Filter 3')">Filter 3</li>
                                    </ul>
                                </div>
        
                            </div>
                        </div>
                    </div>
                    <!-- ----- Post Bar Top ends ----- -->

                    <!-- ##### All Posts starts ##### -->
                    <!-- ----- Post Card Container starts ----- -->
                    <div class="post-card-flow" id="allPostsContainer">

                        <!-- #1 Post -->
                        <!-- ----- Post Card Box starts ----- -->
                        <div class="post-card d-flex flex-row align-items-center justify-content-between" id="postCard1">

                            <!-- Post Card Box Part-1 -->
                            <div class="post-card-box-1 d-flex flex-row align-items-center justify-content-between">

                                <!-- Author Box -->
                                <div class="author-box d-flex flex-row align-items-center justify-content-between">
                                    <div class="author-sl-num">01</div>
                                    <div
                                        class="author-dp-box d-flex flex-column align-items-center justify-content-between">
                                        <img class="author-pic" src="./assets/img/png/author-avatar.png"
                                            alt="author-avatar/png">
                                        <div class="author-name text-center">Author Name</div>
                                    </div>
                                </div>

                                <!-- Author Details Box -->
                                <div class="author-details d-flex flex-column align-items-start justify-content-center">
                                    <h4 class="post-card-title">Post Title</h4>
                                    <div
                                        class="post-card-middle-tag d-flex flex-row align-items-sm-start justify-content-start">
                                        <div
                                            class="post-card-time d-flex flex-row align-items-center justify-content-between">
                                            <img src="./assets/img/svg/post-card-time.svg" alt="post-card-time">
                                            <span>10 min read</span>
                                        </div>

                                        <div
                                            class="post-category-tag d-flex flex-row align-items-center justify-content-between">
                                            <img src="./assets/img/svg/post-category-tag-icon.svg"
                                                alt="post-category-tag-icon/svg">
                                            <span>Category Name</span>
                                        </div>
                                    </div>

                                    <p class="post-para">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
                                        Lorem....
                                    </p>

                                    <div
                                        class="post-card-btn-box d-flex flex-row align-items-start justify-content-start">
                                        <button>
                                            <img src="./assets/img/svg/post-card-visibility-icon.svg"
                                                alt="post-card-visibility-icon/svg">
                                        </button>
                                        <button>
                                            <img src="./assets/img/svg/post-card-edit-icon.svg"
                                                alt="post-card-edit-icon/svg">
                                        </button>
                                        <button class="delete-post-btn" id="deletePostBtn1" onclick="moveToTrash(this.id)">
                                            <img src="./assets/img/svg/post-card-delete-icon.svg"
                                                alt="post-card-delete-icon/svg">
                                        </button>
                                    </div>
                                </div>

                            </div>

                            <!-- Post Card Box Part-2 -->
                            <div class="post-card-box-2 w-100 d-flex flex-row align-items-center justify-content-start">

                                <div class="row w-100">
                                    <div
                                        class="post-card-publish col-3 d-flex align-items-center justify-content-center">
                                        25 min ago</div>
                                    <div
                                        class="post-card-comments col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                    <div class="post-card-share col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                    <div
                                        class="post-card-impressions col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                </div>
                            </div>

                        </div>
                        <!-- ----- Post Card Box ends ----- -->

                        <!-- #2 Post -->
                        <!-- ----- Post Card Box starts ----- -->
                        <div class="post-card d-flex flex-row align-items-center justify-content-between" id="postCard2">

                            <!-- Post Card Box Part-1 -->
                            <div class="post-card-box-1 d-flex flex-row align-items-center justify-content-between">

                                <!-- Author Box -->
                                <div class="author-box d-flex flex-row align-items-center justify-content-between">
                                    <div class="author-sl-num">02</div>
                                    <div
                                        class="author-dp-box d-flex flex-column align-items-center justify-content-between">
                                        <img class="author-pic" src="./assets/img/png/author-avatar.png"
                                            alt="author-avatar/png">
                                        <div class="author-name text-center">Author Name</div>
                                    </div>
                                </div>

                                <!-- Author Details Box -->
                                <div class="author-details d-flex flex-column align-items-start justify-content-center">
                                    <h4 class="post-card-title">Post Title</h4>
                                    <div
                                        class="post-card-middle-tag d-flex flex-row align-items-sm-start justify-content-start">
                                        <div
                                            class="post-card-time d-flex flex-row align-items-center justify-content-between">
                                            <img src="./assets/img/svg/post-card-time.svg" alt="post-card-time">
                                            <span>10 min read</span>
                                        </div>

                                        <div
                                            class="post-category-tag d-flex flex-row align-items-center justify-content-between">
                                            <img src="./assets/img/svg/post-category-tag-icon.svg"
                                                alt="post-category-tag-icon/svg">
                                            <span>Category Name</span>
                                        </div>
                                    </div>

                                    <p class="post-para">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
                                        Lorem....
                                    </p>

                                    <div
                                        class="post-card-btn-box d-flex flex-row align-items-start justify-content-start">
                                        <button>
                                            <img src="./assets/img/svg/post-card-visibility-icon.svg"
                                                alt="post-card-visibility-icon/svg">
                                        </button>
                                        <button>
                                            <img src="./assets/img/svg/post-card-edit-icon.svg"
                                                alt="post-card-edit-icon/svg">
                                        </button>
                                        <button class="delete-post-btn" id="deletePostBtn2" onclick="moveToTrash(this.id)">
                                            <img src="./assets/img/svg/post-card-delete-icon.svg"
                                                alt="post-card-delete-icon/svg">
                                        </button>
                                    </div>
                                </div>

                            </div>

                            <!-- Post Card Box Part-2 -->
                            <div class="post-card-box-2 w-100 d-flex flex-row align-items-center justify-content-start">

                                <div class="row w-100">
                                    <div
                                        class="post-card-publish col-3 d-flex align-items-center justify-content-center">
                                        25 min ago</div>
                                    <div
                                        class="post-card-comments col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                    <div class="post-card-share col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                    <div
                                        class="post-card-impressions col-3 d-flex align-items-center justify-content-center">
                                        215</div>
                                </div>
                            </div>

                        </div>
                        <!-- ----- Post Card Box ends ----- -->

                    </div>
                    <!-- ----- Post Card Container ends ----- -->
                    <!-- ##### All Posts ends ##### -->

                    <!-- ##### Trash Posts starts ##### -->
                    <div class="post-card-flow" id="trashPostsContainer">

                        

                    </div>
                    <!-- ##### Trash Posts ends ##### -->

                    <!-- ##### Published Posts starts -->
                    <div class="post-card-flow" id="publishedPostsContainer">

                        

                    </div>
                    <!-- ##### Published Posts ends -->

                </div>
                <!-- ---- Individual Post ends ----- -->

CSS代码：

.individual-post-box {
    height: 50vh;
    background-color: #FFF;
    border-left: 1px solid #DCDCDC;
    border-right: 1px solid #DCDCDC;
    padding: 40px 20px 0px 20px;
    gap: 10px;
}

.post-bar-top-header {
    width: 92%;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.08px;
}

.post-bar-top-box-1 {
    gap: 130px;
}

.post-bar-top-box-2 {
    gap: 30px;
}

.post-card-flow {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0 20px;
}

.post-card-flow::-webkit-scrollbar {
    width: 4px;
}

.post-card {
    border-radius: 24px;
    border-top: 0.5px solid var(--sidebar-counts);
    width: 100%;
}

.post-card-box-1 {
    padding: 20px;
    gap: 30px;
}

.author-box {
    gap: 20px;
}

.author-dp-box {
    gap: 15px;
}

.author-sl-num {
    color: rgba(0, 0, 0, 0.60);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0.5px;
}

.author-name {
    color: #000;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    width: 92px;
}

.author-details {
    gap: 4px;
}

.post-card-title {
    margin-bottom: 0;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.08px;
}

.post-card-middle-tag {
    gap: 20px;
}

.post-card-time,
.post-category-tag {
    gap: 10px;
}

.post-card-time span,
.post-category-tag span {
    color: rgba(0, 0, 0, 0.60);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.03px;
}

.post-para {
    width: 333px;
    color: rgba(0, 0, 0, 0.60);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.post-card-btn-box {
    margin-top: 12px;
    gap: 30px;
}

.post-card-btn-box button {
    transition: 0.25s;
    -webkit-transition: 0.25s;
    background-color: transparent;
    border: none;
}

.post-card-btn-box button:hover img {
    filter: contrast(100);
    -webkit-filter: contrast(100);
}


.post-card-box-2 {
    padding: 60px 0;
}

.post-card-publish,
.post-card-comments,
.post-card-share,
.post-card-impressions {
    color: rgba(0, 0, 0, 0.60);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0.5px;
}

JS代码：

let allPostContainer = document.querySelector('#allPostsContainer');
let trashPostsContainer = document.querySelector('#trashPostsContainer');
let allPosts = allPostContainer.querySelectorAll('.post-card');
let deleteButtons = document.querySelectorAll('.delete-post-btn');

function moveToTrash(delBtnId) {
    // Extract post number from delete button id
    let postId = delBtnId.slice(13);

    // Find the post to be deleted
    let postToRemove = document.querySelector(`#postCard${postId}`);

    // If the post is found, clone it and append to the trash container
    if (postToRemove) {
        let clonedPost = postToRemove.cloneNode(true);
        trashPostsContainer.appendChild(clonedPost);

        // Remove the post from the all posts container
        postToRemove.remove();
    }
}

我希望当我单击帖子的删除按钮时，它会移动到垃圾箱，但在我的代码中，它会进入垃圾箱，但没有从所有帖子部分正确删除。单击删除按钮后，按钮将从所有明信片中删除，当我访问垃圾箱时，特定帖子会正确移动，当我访问返回所有帖子时，它会从所有帖子中正确删除。

JavaScript 后逻辑

0赞 Jaromanda X 11/10/2023

你知道你可以，这与你的克隆/追加/删除是一样的 - 无论如何，你的代码似乎完全按照你的意愿去做。trashPostsContainer.appendChild(postToRemove);

0赞 Jaromanda X 11/10/2023

另外，你为什么要标记这个问题，什么时候两者都与它完全无关？reactjsnode.js

答： 暂无答案

上一个：我在 C# leetcode TwoSum 中遇到了逻辑问题。重复数字的最后一种情况是返回错误的索引

下一个：以下代码部分中user_input = post_data.split（'='）[1] 是什么？

为什么这个 javascript 代码不能完美运行？

Why this javascript code is not working perfectly?

评论