提问者:小点点

单击delete(删除)按钮时,将删除所有内容


null

  $(".delete").click(function () {
               $(".delete").parent().remove();
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">

        <div class="todoCont">
            <h2>todo</h2>
            <div class="tasks" id="tasks">
                <input type="checkbox" id="checkBox">
                <div class="cat_time">
                    <h3 id="getCategory" class="getCategory">Coding</h3>
                    <p id="getTime">12:30 AM</p>
                </div>
                <span id="getDescription">Practice Javascript</span>
                <p class="delete">Delete</p>
            </div>
        </div>

        <div class="completedTaskCont">
            <h2>completed</h2>
            <div class="tasks">
                <input type="checkbox" id="checkBox" checked>
                <div class="cat_time">
                    <h3 id="getCategory">Shopping</h3>
                    <p id="getTime">10:30 AM</p>
                </div>
                <span id="getDescription">Bazar India</span>
                <p class="delete">Delete</p>
            </div>
        </div>

    </div>

null

在这段代码中,当我单击delete时,它将删除所有内容。 如何修复这个问题? 这是待办事项列表代码。 我试图解决使用for循环的问题,但没有奏效。


共3个答案

匿名用户

使用以下方法:

$(".delete").click(function () {
// This will delete the parent of element being clicked
  $(this).parent().remove();
});

null

  $(".delete").click(function () {
               $(this).parent().remove();
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">

        <div class="todoCont">
            <h2>todo</h2>
            <div class="tasks" id="tasks">
                <input type="checkbox" id="checkBox">
                <div class="cat_time">
                    <h3 id="getCategory" class="getCategory">Coding</h3>
                    <p id="getTime">12:30 AM</p>
                </div>
                <span id="getDescription">Practice Javascript</span>
                <p class="delete">Delete</p>
            </div>
        </div>

        <div class="completedTaskCont">
            <h2>completed</h2>
            <div class="tasks">
                <input type="checkbox" id="checkBox" checked>
                <div class="cat_time">
                    <h3 id="getCategory">Shopping</h3>
                    <p id="getTime">10:30 AM</p>
                </div>
                <span id="getDescription">Bazar India</span>
                <p class="delete">Delete</p>
            </div>
        </div>

    </div>

匿名用户

单独上课很危险。 拿“这个”来说:

null

  $(".delete").click(function () {
               $(this).parent().remove();
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">

        <div class="todoCont">
            <h2>todo</h2>
            <div class="tasks" id="tasks">
                <input type="checkbox" id="checkBox">
                <div class="cat_time">
                    <h3 id="getCategory" class="getCategory">Coding</h3>
                    <p id="getTime">12:30 AM</p>
                </div>
                <span id="getDescription">Practice Javascript</span>
                <p class="delete">Delete</p>
            </div>
        </div>

        <div class="completedTaskCont">
            <h2>completed</h2>
            <div class="tasks">
                <input type="checkbox" id="checkBox" checked>
                <div class="cat_time">
                    <h3 id="getCategory">Shopping</h3>
                    <p id="getTime">10:30 AM</p>
                </div>
                <span id="getDescription">Bazar India</span>
                <p class="delete">Delete</p>
            </div>
        </div>

    </div>

匿名用户

使用delete类调用所有元素,并对所有元素执行链接操作。 另一种可能的语法是调用Click event对象上的目标元素:$(event.target).parent().remove()