Question

我一直在尝试找出如何获取动态创建的元素的索引，以便编写可以删除它的函数（拼接）。

我想出了如何真正手动获取索引的方法，但是问题是我从事件委托那里获取了Propagation，但不确定如何停止它。

我尝试将stopPropagation（），preventDefault（），stopImmediatePropagation（）放在函数内的各个位置，并花了最后一小时在网上阅读，试图弄清楚如何停止它。我什至尝试将e.bubble设置为false无济于事。

有人可以在这里指出正确的方向吗？我确定这是我的经验不足，但到目前为止我还没有想法。

.job-search {
    position: sticky;   /* The magic */
    z-index: 1;         /* Ensure it stays on top of other player divs */
    top: 0px;           /* Where it should stick to */
}

@login_required
def edit_doctorslots(request, cliniclabel, doctor_id):
    doctor_id=int(doctor_id)
    doc = get_object_or_404(doctor, docid=doctor_id)
    cl = Clinic.objects.get(label=cliniclabel)
    print("Clinic name", cl.name)
    formslot = SlotForm()
    formspecialdays = SpecialdaysForm()
    formweekdays = WeekdaysForm()
    weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    weekdaynum = [0,1,2,3,4,5,6]
    weekzip = zip(weekdays, weekdaynum)
    newweekzip = weekzip
    return render(request, 'clinic/editslots.html', {'rnd_num': randomnumber(), 'clinic': cl, 'doctor': doc, 'formslot': formslot, 'formspecialdays': formspecialdays, 'formweekdays': formweekdays, 'weekzip': weekzip, 'newweekzip': newweekzip })

<div class="container ml-5 mr-5">
    <div class="jumbotron slotgroup slotavailable mb-1 mt-5" id="jumbo_week_avail">
      <div class="slot-header" role="alert">
        Enter your weekly consultation hours at {{ clinic.name }}. This will supercede regular hours. If you specify some week days, but not others, you will be assumed to be on leave during those days. If you dont specify any week days, but specify regular hours, you will be assumed to be working on all days.
      </div>
      {% for weekday, weeknum in weekzip %}
      <div class="row row_week_avail" id="row_week_avail{{ weeknum }}">
        <div class="col-md-1 mr-2">
          <label class="switch switch_type1 greenswitch" role="switch">
          <input type="checkbox" id="chk_week_avail{{ weeknum }}" class="switch__toggle">
          <span class="switch__label"></span>
        </label>
        </div>
        <div class="col-md-2 text-right">
          <span class="">{{ weekday }}</span>
        </div>
          <div class="col-md-6">
            <input type="text" class="form-control timeinput" id="start_week_avail{{ weeknum }}" aria-describedby="mainslotstarthelp" placeholder="Starts at">
            <small id="mainslotstarthelp" class="form-text text-muted">Start time of consultations</small>
          </div>
          <div class="col-md-6">
            <input type="text" class="form-control timeinput" id="end_week_avail{{ weeknum }}" aria-describedby="mainslotendhelp" placeholder="Ends at">
            <small id="mainslotendhelp" class="form-text text-muted">End time of consultations</small>
          </div>
          <div class="col-md-6">
              <a class="btn btn-primary AddHoursBtn" id="btn_week_avail{{ weeknum }}"><i class="fas fa-plus"></i></a>
          </div>
      </div>
      {% endfor %}
    </div>

    <div class="jumbotron slotgroup slotunavailable mb-1" id="jumbo_week_break">
      <div class="slot-header" role="alert">
        Break Time (Unavailable Hours) <span class="text-muted">Time in between regular period, where you are unavailable.</span>
      </div>
      {% for weekday, weeknum in weekzip %}
        <div class="row row_week_break" id="row_week_break{{ weeknum }}">
          <div class="col-md-1 mr-2">
            <label class="switch switch_type1 greenswitch" role="switch">
            <input type="checkbox" id="chk_week_break{{ weeknum }}" class="switch__toggle">
            <span class="switch__label"></span>
          </label>
          </div>
          <div class="col-md-2 text-right">
            <span class="">{{ weekday }}</span>
          </div>
            <div class="col-md-6">
              <input type="text" class="form-control timeinput" id="start_week_break{{ weeknum }}" aria-describedby="mainslotstarthelp" placeholder="Starts at">
              <small id="mainslotstarthelp" class="form-text text-muted">Start time of consultations</small>
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control timeinput" id="end_week_break{{ weeknum }}" aria-describedby="mainslotendhelp" placeholder="Ends at">
              <small id="mainslotendhelp" class="form-text text-muted">End time of consultations</small>
            </div>
            <div class="col-md-6">
                <a class="btn btn-primary AddHoursBtn" id="btn_week_break{{ weeknum }}"><i class="fas fa-plus"></i></a>
            </div>
        </div>
      {% endfor %}
    </div>
</div>

Answer 1

我想弄清楚如何从列表中删除项目

将函数createDisplayItem的最后一行更改为..

function createDisplayItem(){
    ...
    return newUl.appendChild(trashCan) // Added return
}

现在，您有一个新创建的垃圾箱元素的实例返回到调用代码，因此现在我们要做的就是向此特定垃圾箱元素添加一个click事件，并让删除其父ul ..

submit.addEventListener("click", function() {
    ...
    let trashCan = createDisplayItem();
    trashCan.addEventListener('click', function(){
        confirm('Are you sure you want to delete this?')
        && this.parentNode.remove()
    })
    ...
});

因此，由于现在在此代码中，每个垃圾桶都可以照顾自己的父元素，因此您不必担心再从父display元素中查找索引。

JavaScript停止传播

1 个答案: